https://github.com/node-projects/vs-code-designer-addon

A VSCode Addon using the web-component-designer
https://github.com/node-projects/vs-code-designer-addon

Last synced: about 1 month ago
JSON representation

A VSCode Addon using the web-component-designer

• Host: GitHub
• URL: https://github.com/node-projects/vs-code-designer-addon
• Owner: node-projects
• License: mit
• Created: 2022-12-11T08:57:25.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-25T22:10:58.000Z (5 months ago)
• Last Synced: 2025-03-25T22:51:33.172Z (about 2 months ago)
• Language: TypeScript
• Size: 1.97 MB
• Stars: 11
• Watchers: 5
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vs-code-designer-addon

A VSCode WYSIWYG HTML Designer Addon.

it is also usable in VSCodeWeb

## 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](sample.gif)

## 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.