Visual Studio Code Extension for Tizen Web supports WYSIWYG Design Editor features such as Preview, JavaScript Assistant, Structure View, New Page, HTML Assistant, Undo, and Redo.
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.
Features
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.
Preview
You can use Preview in the toolbar to display the preview of the edited page.
JavaScript Assistant
You can use JavaScript Assistant in the toolbar to edit the Javascript code with JavaScript Assistant Wizard.
Structure View
You can use Structure View in the toolbar to see the DOM tree of the page.
New Page
You can use New Page in the toolbar to add a new page with empty, header, footer, or list template.
HTML Assistant
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.
in the toolbar to display the preview of the edited page.
in the toolbar to edit the Javascript code with JavaScript Assistant Wizard 
.
in the toolbar to see the DOM tree of the page.
in the toolbar to add a new page with empty, header, footer, or list template.
in the toolbar to edit the HTML code.
or Redo 
in the toolbar to undo or redo any action.
