Views

You may add an empty view by clicking the add button () and typing a name for the new view.

Hatthi offers a few more ways to generate views. Click on the more arrow and select the desired option.

Importing a view from an Url () generates a new view having the exact same markup as the one returned by the given Url. Keep in mind that any classes, javascript code or css links are not imported, therefore the imported view may not look identical to the one you find in the browser.

By importing from a file () the markup will be the one present in the html file.

Instead of starting a view from scratch, you may want to generate a layout. A layout defines just the arrangement of generic elements: containers(<div>), texts(<p>), links(<a>), buttons(<button>) and images(<img>) on a canvas. After confirming the layout in the Layout Editor, an according view will be generated.

Available options for creating layouts are by uploading an image or entering a url from which to take a screenshot.

You may upload an image () representing the page, like an export from design tools such as Figma™, Zepelin™ and others. In this scenario the image will be processed and an initial layout will be generated for further editing. Refer to the Layout Editor for details.

Another option Hatthi offers is to insert a Url() and generate an initial layout from it. In this case a screenshot of the page responding to the given Url will be taken and used to generate the initial layout.