From Vision to Reality: Transform Your Screenshots into Stunning Web Pages Instantly!
Published: 2024-01-04 06:29:50

**GitHub**: [https://github.com/Mrxyy/screenshot-to-page](https://github.com/Mrxyy/screenshot-to-page)

> **Converts screenshots, image links, and sketch drawings into code to create pages (supports OpenAI and Google Gemini), with one-click deployment to the cloud ☁️**.

* [Live Demo](https://screenshot-to-page.vercel.app/) (**click to experience**, no input required).

* Desktop

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1f7038daee74e87982966a4c332329a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1188&h=496&s=383957&e=png&b=f0e6fa" width="40%" align="center"><span>      ➡️      </span><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf897f1ad6c54b2e9d8ff8cbd2b7c8fd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1602&h=636&s=705132&e=png&b=fefdfd" width="40%" align="center">

* Mobile

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d3f5c41af174f4ea65fc061713486db~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=396&h=847&s=325473&e=png&b=faf9f9" width="30%" align="center"><span>      ➡️      </span><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/480942e940a24df79ccebf542215bab9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=369&h=635&s=36831&e=png&b=ebebeb" width="30%" align="center">

## Milestones 🌊

* Fully rebuilt using Next.js, supporting simple deployment across multiple cloud platforms.

* 2023/12/28 📅: Added multiple themes and support for i18n.

* 2023/12/31 📅: Added support for Google Gemini (free).

## Distinctions 🏄🏿‍♂️

* More suitable for developers with a JS/TS tech stack to get started quickly.
* Free serverless cloud platform deployment.
* Supports drawing with Excalidraw.
* Supports Google Gemini (free).

## Plans 🌄

* Implement a code sandbox to support modern, engineered coding practices (coming soon, the codebase is almost complete).
* Implement partial update modifications, similar to V0.
* ~~I18n~~
* ~~Support for Google Gemini~~

## Deployment 🪤

### Docker

```sh
docker run -p 3000:3000 jadenxiong/screenshot-to-page
```

### Vercel

* Click the button on the right to start deployment: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/import?s=https%3A%2F%2Fgithub.com%2FMrxyy%2Fscreenshot-to-page&hasTrialAvailable=1&showOptionalTeamCreation=false&project-name=screenshot-to-page&framework=nextjs&totalProjects=1&remainingProjects=1&env=OPENAI_API_KEY)
* Once deployed, you can start using it;
* (Optional) [Bind a custom domain](https://vercel.com/docs/concepts/projects/domains/add-a-domain): The domain name DNS assigned by Vercel is polluted in some regions, binding a custom domain will allow direct connection.

## Developers 💪

```sh
# pnpm
pnpm i;
pnpm dev;
```

```sh
# yarn
yarn;
yarn dev;
```

## Acknowledgements 🙏

* Original repository: [screenshot-to-code](https://github.com/abi/screenshot-to-code/blob/main/README.md)
* Forked repository: [ant-codeAI](https://github.com/sparrow-js/ant-codeAI)

## Related 🌲

* [local-mk-editor-in-browser](https://github.com/Mrxyy/local-mk-editor-in-browser) 👷
* [chat-query](https://github.com/Mrxyy/chat-query.git) 📖