Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>HTML Wysiwyg (What you see is what you get) Designer AddonNew to Visual Studio Code? Get it now.
HTML Wysiwyg (What you see is what you get) Designer Addon

HTML Wysiwyg (What you see is what you get) Designer Addon

node-projects

|
706 installs
| (1) | Free
A Graphical HTML Designer
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

info

!!! be aware, this extension is only a preview, it's still buggy, but will get better.

vs-code-designer-addon

A VSCode Addon using the web-component-designer

addon-page

https://marketplace.visualstudio.com/items?itemName=node-projects.vscode-designer-addon

references

  • based on https://github.com/node-projects/web-component-designer
  • sample using the designer: https://node-projects.github.io/web-component-designer-demo/index.html

supports

  • html files
  • https://github.com/node-projects/base-custom-webcomponent Components, with css in static style varibale and html in static template variable.
  • https://polymer-library.polymer-project.org/ Components.
  • https://vuejs.org/ Components with templates in 'template' tags.
  • https://svelte.dev/ Components.

sample image

sample

Open the Designer

  • Rightclick on a '.html', '.ts', '.vue' File and Select "Open With", here select "Designer".

Development of the Extension

  • Clone this Repository
  • Open the Cloned Repository in VS Code 1.47+
  • npm install
  • F5 to start debugging

Test new Versions

  • Run 'npm start package', this will start vsce and create a packge wich then you could install localy.
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft