screenshot-to-code

(★ 74,308)

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

File Explorer

Download Latest Version (.zip)

- launch.json
- - bug_report.md
  - custom.md
  - feature_request.md
- FUNDING.yml
- settings.json
- tasks.json
- - engine.py
  - runner.py
  - state.py
- - __init__.py
  - test_utils.py
  - utils.py
- - __init__.py
  - pricing.py
  - token_usage.py
- - __init__.py
  - DebugFileWriter.py
- - __init__.py
  - asset_extraction_benchmark.py
  - config.py
  - core.py
  - runner.py
  - sessions.py
  - sets.py
  - utils.py
- - __init__.py
  - agent_runs.py
  - openai_input_compare.py
  - openai_input_formatting.py
  - prompt_reports.py
- - __init__.py
  - core.py
  - generation.py
  - replicate.py
- - __init__.py
  - base.py
  - playwright_backend.py
  - registry.py
- - __init__.py
  - design_system.py
  - message_builder.py
  - pipeline.py
  - plan.py
  - policies.py
  - prompt_types.py
  - request_parsing.py
  - system_prompt.py
- - agent_runs.py
  - capabilities.py
  - design_systems.py
  - eval_sets.py
  - evals.py
  - export.py
  - generate_code.py
  - home.py
  - model_choice_sets.py
  - prompt_reports.py
  - screenshot.py
- - __init__.py
  - test_agent_engine.py
  - test_agent_runs.py
  - test_agent_tool_runtime.py
  - test_agent_tools.py
  - test_anthropic_many_image_limit.py
  - test_anthropic_provider_config.py
  - test_asset_extraction.py
  - test_asset_extraction_benchmark.py
  - test_babel_cdn.py
  - test_batching.py
  - test_capabilities.py
  - test_codegen_utils.py
  - test_design_systems.py
  - test_eval_runner.py
  - test_eval_sessions.py
  - test_eval_sets.py
  - test_evals_openai_input_compare.py
  - test_export.py
  - test_gemini_provider_config.py
  - test_gemini_provider_session.py
  - test_image_generation_replicate.py
  - test_local_assets.py
  - test_model_selection.py
  - test_openai_input_compare.py
  - test_openai_provider_session.py
  - test_openai_reasoning_parser.py
  - test_parameter_extraction_stage.py
  - test_prompt_reports.py
  - test_prompt_summary.py
  - test_prompts.py
  - test_request_parsing.py
  - test_screenshot.py
  - test_start.py
  - test_status_broadcast.py
  - test_token_usage.py
  - test_tool_image_outputs.py
  - test_update_from_file_snapshot.py
  - test_uploaded_assets.py
  - test_websocket_communicator.py
- - __init__.py
  - prompts.py
  - store.py
  - tools.py
- - __init__.py
  - utils.py
- - __init__.py
  - constants.py
- .gitignore
- .pre-commit-config.yaml
- asset_extraction.py
- babel_cdn.py
- config.py
- custom_types.py
- Dockerfile
- llm.py
- main.py
- poetry.lock
- pyproject.toml
- pyrightconfig.json
- pytest.ini
- README.md
- run_evals.py
- run_image_generation_evals.py
- start.py
- utils.py
- evaluating-claude.md
- agent-tool-calling-flow.md
- agentic-runner-refactor.md
- commits-and-variants.md
- general.md
- images-in-update-history.md
- prompt-history-refactor.md
- variant-system.md
- - .env.jest.example
  - App.tsx
  - config.ts
  - constants.ts
  - generateCode.ts
  - index.css
  - main.tsx
  - setupTests.ts
  - types.ts
  - urls.ts
  - vite-env.d.ts
- .env.example
- .eslintrc.cjs
- .gitignore
- components.json
- Dockerfile
- index.html
- jest.config.js
- package.json
- pnpm-lock.yaml
- postcss.config.js
- tailwind.config.js
- tsconfig.json
- tsconfig.node.json
- vite.config.ts
- cursor-cloud-install.sh
.gitattributes
.gitignore
AGENTS.md
CLAUDE.md
docker-compose.yml
Evaluation.md
LICENSE
package.json
plan.md
QA.md
README.md
TESTING.md
Troubleshooting.md

# Installation Guide

1. Get the code

git clone https://github.com/abi/screenshot-to-code

Downloads the entire project code from GitHub to your computer.

cd screenshot-to-code

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker-compose up -d --build

Runs the command against the services defined in the compose file.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

Pulled directly from this repo's README.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm install

Downloads and installs the libraries listed in package.json.

pnpm dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

4. Python

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Python 3 On Windows, be sure to check 'Add Python to PATH' during installation.

poetry install

Installs the libraries listed in pyproject.toml.

poetry run playwright install chromium

Type this command into your terminal and run it.

poetry env activate

Type this command into your terminal and run it.

poetry run uvicorn main:app --reload --port 7001

Type this command into your terminal and run it.

✅ If it runs without errors and prints output in the terminal, it worked.

Pulled directly from this repo's README.