Sketch2App

Generate code for your desired framework and immediately preview the app simply from a hand-drawn sketch.

Try the web app to create a sandbox on web: Demo

Features

Start by choosing your desired framework (React, Next, React Native, Flutter) for your app.

Harnessing the power of GPT4 Vision - It will instantly generate your code and add to your workspace.

You may regenerate to your liking with text prompts.

Iterate faster by generating boilerplate code from a simple hand drawn sketch on paper captured from webcam.

• Create File or Component: Transform sketches into code for a new component in your project.
• Create New Project: Generate a new project with ready to go boilerplate code directly from a sketch.

How to use extension

Launch either command uing the Walkthrough tutorial or Command Palette. Use CTRL + SHIFT + P and search Create with sketch2app to capture your sketch. Install packages and run as usual.

1. Create a Sketch: Prepare a mockup of your app or component.
2. Submit Your Sketch: Use the Create new app from sketch command to launch web app.
3. Edit and Preview: Modify the generated code and preview changes in real-time with Create file or component from sketch.

Commands (CTRL+SHIFT+P)

• sketch2app.makeFile: Create a file or component from a sketch.
• sketch2app.createApp: Create a new project from a sketch.

Requirements

VSCode Version 1.84.0 or higher.

Pricing

Free! However, we may ask to replace with your own API key in the future.

Known Issues

No submitted issues.

Release Notes

Refer to the Changelog for detailed release notes.