Screenshot to Code - An open-source project that uses AI to convert screenshots into web page code.

What is Screenshot to Code?

Sscreenshot to Code is an open-source project that uses artificial intelligence technologies (GPT-4V and DALL-E 3) to convert users' screenshots into front-end web page code. It has already garnered 34,000 stars on GitHub. The project's core function is to automate the coding process of web page design, enabling developers to quickly generate corresponding HTML, CSS, and JavaScript code by providing screenshots of their web pages, saving front-end developers time and effort.

Official website entrance:https://screenshottocode.com/

GitHub repository:https://github.com/abi/screenshot-to-code

The main functions of Screenshot to Code

• Intelligent code generationUsing the GPT-4 Vision model, the project can analyze screenshots provided by users and automatically generate corresponding HTML, CSS, and JavaScript code, quickly converting design drafts into runnable web page code.
• Similar image generationThe project also incorporates DALL-E 3's image generation capabilities, which can automatically create images similar to the original screenshots based on the <img> tags in the generated HTML code, and embed these images into the webpage to maintain visual consistency.
• Real-time code updatesUsers can view the generated code in real time within the application and can adjust styles or update missing parts of the code by interacting with the AI to meet specific design requirements.
• Flexible configuration optionsThe application provides configuration options that allow users to choose the front-end technology to use (such as HTML + Tailwind, React + Tailwind, Bootstrap, Vue + Tailwind) and whether to enable DALL-E image generation and features.
• URL webpage cloningIn addition to manually uploading screenshots, users can enter a URL to automatically take a screenshot to clone an online website.
• Edit the generated codeScreenshot to Code includes a built-in code editor that allows developers to modify the generated code, fine-tune the output, correct any errors, or add their own coding style.
• Preview and code exportThis tool offers a real-time preview function, allowing users to view the effects of editing and modifications in real time, and supports downloading or copying the final code.
• Support local deploymentUsers can choose to deploy the project on their local computer to run it on their own computer, which provides convenience for users who wish to use the tool in a local environment.

How to use Screenshot to Code

Method 1: Run Screenshot to Code in the online hosted version

1. Visit the official website of Screenshot to Code (screenshottocode.com) and register/log in.
2. Click the settings icon on the left and enter the OpenAI API key.
3. Select the technology/framework used in the code you want to generate, and upload or paste your screenshot.
4. Waiting for identification and code generation; the generated code can be updated, modified, and downloaded.

Method 2: Local deployment and execution of Screenshot to Code

1. Clone a GitHub repository to your local computer:git clone https://github.com/abi/screenshot-to-code.git
2.  Configure the backend and API keys:
   1. Install the Poetry package manager:pip install poetry
   2. Navigate to the project's backend directory:cd backend
   3. Setting the OpenAI API key:echo "OPENAI_API_KEY=your-key" > .env
   4. Install backend dependencies: Runpoetry installThe command installs all Python dependencies.
   5. Start the backend server:poetry run uvicorn main:app --reload --port 7001
3. Install frontend dependencies:cd frontendSwitch to the front-end directory, and then use...yarnInstall dependencies and useyarn devCommand execution
4. Access the application using a browser: Use any browserhttp://localhost:5173You can start using Screenshot to Code now.

Screenshot to Code product price

• Free Version: Screenshot to Code offers a free and open-source version that users can deploy locally or use the official online hosted version by entering their own OpenAI API key.
• Paid Versions: For users without an API key, Screenshot to Code's official hosted version also offers a paid subscription version: the Hobby plan is $15 per month (providing 100 credits per month), and the Pro plan is $40 per month (providing 300 credits per month). If you pay annually, you get 2 months free.

Frequently Asked Questions