Tizen Web with Design Editor
You must select the HTML extension file in the file explorer before you launch Design Editor.
Run Design Editor
To run Design Editor, perform one of the following:
Using Command Palette
To launch Design Editor, click View > Command Palette in VS Code.
In the input field of Command Palette that appears, type Tizen Web: Run Design-Editor and press Enter.
A new tab is created and Design Editor is launched.
Using Design-Editor button
To launch Design Editor, click Design-Editor on the VS Code window as shown in the following figure:
Using right-click options
To launch Design Editor, select the HTML file that you want to launch and right-click.
From the list that appears, click Tizen Web: Run Design-Editor.
Following are the WYSIWYG Design Editor features:
Drag and Drop a component
You can drag and drop a component from the Widgets palette to the canvas.
Change component properties
After placing the UI components, you can set the component properties in the Attributes palette.
You can use Preview in the toolbar to display the preview of the edited page.
You can use Structure View in the toolbar to see the DOM tree of the page.
You can use New Page in the toolbar to add a new page with empty, header, footer, or list template.
You can use HTML Assistant in the toolbar to edit the HTML code.
Undo or Redo
You can use Undo or Redo in the toolbar to undo or redo any action.
Usage of Design Editor