GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → BuilderIO → vscode

BuilderIO / vscode

Licence: MIT license
Builder.io for VSCode - turn designs into code!

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Labels

reactangularvuesveltefigmano-codenocodedesign-to-code

Projects that are alternatives of or similar to vscode

Brick Design
全场景流式布局，可视化拖拽、随意嵌套组合、实时渲染、实时辅助线展示，实时组件间距展示、实时拖拽排序、状态域管理，可视化属性配置、可视化样式配置、多设备适配展示，支持逻辑渲染、模板字符变量、表达式、自定义方法、自定义状态
Stars: ✭ 4,048 (+2812.23%)
Mutual labels:  no-code, nocode
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1553.96%)
Mutual labels:  svelte, figma
Grapesjs
Free and Open source Web Builder Framework. Next generation tool for building templates without coding
Stars: ✭ 14,892 (+10613.67%)
Mutual labels:  no-code, nocode
Figma-to-HTML
Figma to HTML/React and truly responsive
Stars: ✭ 27 (-80.58%)
Mutual labels:  figma, design-to-code
designto-code
Design to code engine. A design ✌️ code standard. Supports React, Flutter and more.
Stars: ✭ 87 (-37.41%)
Mutual labels:  figma, design-to-code
tideflow
Building extensible automation. Tideflow is a Realtime, open source workflows execution and monitorization web application.
Stars: ✭ 101 (-27.34%)
Mutual labels:  no-code, nocode
SvelteTetris
Basic Tetris game created with Svelte
Stars: ✭ 21 (-84.89%)
Mutual labels:  svelte
fastify-vite
This plugin lets you load a Vite client application and set it up for Server-Side Rendering (SSR) with Fastify.
Stars: ✭ 497 (+257.55%)
Mutual labels:  svelte
octave-compass
A tool for exploring musical scales and chords
Stars: ✭ 21 (-84.89%)
Mutual labels:  svelte
figma
Primer, GitHub's design system, available on Figma.
Stars: ✭ 28 (-79.86%)
Mutual labels:  figma
sveltekit-blog
Sveltekit blog starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.
Stars: ✭ 100 (-28.06%)
Mutual labels:  svelte
svelte-datagrid
Svelte data grid spreadsheet best best features and performance from excel
Stars: ✭ 48 (-65.47%)
Mutual labels:  svelte
BoxFeed
News App 📱 built to demonstrate the use of SwiftUI 3 features, Async/Await, CoreData and MVVM architecture pattern.
Stars: ✭ 112 (-19.42%)
Mutual labels:  figma
spellbook
Spellbook is a bookmark extension for Chrome and Firefox
Stars: ✭ 19 (-86.33%)
Mutual labels:  svelte
Tkinter-Designer
An easy and fast way to create a Python GUI 🐍
Stars: ✭ 4,697 (+3279.14%)
Mutual labels:  figma
fa-svelte
Font Awesome 5 for svelte.js
Stars: ✭ 72 (-48.2%)
Mutual labels:  svelte
sveltekit-blog-template
A SvelteKit blog template
Stars: ✭ 79 (-43.17%)
Mutual labels:  svelte
fireworks-js
🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
Stars: ✭ 550 (+295.68%)
Mutual labels:  svelte
figma-static-localizer
A Figma plugin for static localization
Stars: ✭ 30 (-78.42%)
Mutual labels:  figma
curl2ab
Convert cURL command line to ab (apache bench)
Stars: ✭ 22 (-84.17%)
Mutual labels:  svelte
View All Similar Projects ➔

Builder.io for VSCode

Visual coding in your IDE!


Visual coding demo


What can yo do?

  1. Import designs from Builder.io and Figma and convert them to code of your framework of choice (React, Vue, Svelte, Solid, Angular, and more)
  2. Visually create and edit Mitosis code

Powered by Builder.io and Mitosis

Screenshot of Builder.io in VSCode

Screenshot of grabbing code from Builder.io in VSCode

How to use

Install the extension here

Open your command palette, search "Builder.io", and hit enter to launch the Builder.io fiddle to create and import designs and grab clean generated code via Mitosis

Screenshot of entering Builder.io from comand palette

Features

  • Convert Figma and Builder designs to React, Vue, Angular, HTML, etc code via Mitosis.

Roadmap

  • Read and write local Mitosis code with Builder.io's visual editor
  • Generate Builder.io integration code locally

Developing locally

  • Open this example in VS Code 1.47+
  • npm install
  • npm run watch or npm run compile
  • F5 to start debugging
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].