Turning a rough sketch into a prototype
Upload a simple page drawing and get a first React implementation that can be refined by a developer.
Independent tool overview
Napkins.dev at a glance
Napkins.dev is a free, open-source wireframe-to-app generator that turns a screenshot or sketch into a runnable React and Tailwind prototype.
Visit the official Napkins.dev site ↗
- Input
- A wireframe, sketch, mockup, or interface screenshot
- Output
- Runnable React and Tailwind front end
- Current model
- Kimi K2.5 through Together AI
- Preview
- Sandpack browser sandbox
- Source license
- MIT
- Self-hosting
- Supported
- Last reviewed
- August 29, 2026
Overview
What Napkins.dev is
Napkins.dev has one focused workflow: upload an image of a web interface and generate a matching front-end app. The current hosted version uses Kimi K2.5 through Together AI and renders the result in a browser sandbox.
It is useful for converting a hand-drawn wireframe, mockup, or screenshot into an initial React and Tailwind implementation. Developers can then inspect, copy, and revise the generated code rather than starting every layout from an empty file.
Napkins.dev is a prototype generator, not a complete application platform. It does not infer a secure backend, data model, permissions, accessibility behavior, business rules, testing strategy, or production deployment from a screenshot.
Use cases
Who Napkins.dev is best for
The strongest fit depends on the job you need the product to complete, not the size of its feature list.
Recreating a visual reference
Use a screenshot as layout inspiration when the goal is to rebuild the structure and styling in a modern front-end stack.
Testing a UI direction
Make a runnable version of a static concept before spending time on full design-system and application work.
Learning screenshot-to-code architecture
Study or customize an MIT-licensed Next.js application that combines visual model inference, S3 image storage, and Sandpack preview.
Capabilities
Core Napkins.dev features
Screenshot-to-code generation
Analyzes the uploaded interface image and writes React components styled with Tailwind CSS.
Wireframe support
Works with rough interface sketches as well as polished screenshots, making it useful before a high-fidelity design exists.
Runnable preview
Loads the generated project in Sandpack so users can inspect the result without setting up a local development environment first.
Open-source implementation
The MIT-licensed repository exposes the Next.js app, prompts, model integration, storage setup, and preview architecture.
Self-hosting
Developers can run their own deployment with a Together AI API key and compatible S3 object storage.
Process
How the Napkins.dev workflow works
Step 1
Prepare a clear source image
Crop to one page or state, use readable spacing and contrast, and remove unrelated browser chrome or confidential information.
Step 2
Upload and generate
Submit the screenshot or wireframe and let the current vision-language model produce a React and Tailwind interpretation.
Step 3
Compare structure before polish
Check hierarchy, responsive intent, component boundaries, and interaction states before spending time on exact colors and spacing.
Step 4
Move the code into the real project
Adapt generated components to the application's framework, design tokens, routes, data layer, authentication, and existing component library.
Step 5
Run production checks
Review accessibility, responsiveness, browser support, performance, security, tests, licensing, and visual accuracy before shipping.
Cost
Napkins.dev pricing and free plan
Napkins.dev's hosted generator is currently available without a published paid plan. The source code is free under the MIT license. A self-hosted deployment still incurs Together AI inference, S3-compatible storage, hosting, monitoring, and engineering costs.
Hosted generator
Free
Use the public screenshot-to-app demo without a published subscription tier.
- Upload an image
- Generate React and Tailwind
- Browser preview
- Usage limits are not publicly specified
Self-hosted
No software license fee
Run and modify the MIT-licensed application on your own infrastructure.
- Together AI API key required
- S3-compatible image storage required
- Hosting and model usage billed separately
- You maintain privacy, security, and updates
Pricing checked . Check current pricing at the source ↗
Assessment
Napkins.dev strengths and limitations
Where it stands out
- Extremely simple path from a visual idea to runnable front-end code
- React and Tailwind output is familiar to a large developer ecosystem
- Browser preview makes it easy to judge the first pass quickly
- MIT-licensed source allows inspection, customization, and self-hosting
- Focused scope makes it easier to understand than a large all-in-one app builder
What to consider
- A screenshot shows appearance but not data flow, validation, permissions, loading, errors, or other hidden application behavior
- Generated output needs developer review for component quality, responsive behavior, accessibility, and maintainability
- The hosted tool is designed around React and Tailwind rather than offering several output frameworks
- The project repository lists mobile polish and richer editing as areas for further work
- Uploaded designs may contain confidential or copyrighted material, so users should review storage, model-processing, and reuse rights
- Self-hosting requires managing model credentials, object storage, deployment, abuse protection, and updates
Compare
Napkins.dev alternatives
The right alternative depends on the specific output, workflow, controls and budget your project requires.
Design
Vercel v0
Choose Vercel v0 for a more full-featured prompt-and-image UI builder with an ongoing conversational editing workflow.
Explore Vercel v0 →Coding
Lovable
Choose Lovable when the goal is a broader full-stack application with backend integrations and deployment, not just screenshot-derived front-end code.
Explore Lovable →Coding
Bolt.new
Choose Bolt for browser-based full-app generation, package installation, and iterative coding from natural-language requirements.
Explore Bolt.new →Questions
Napkins.dev FAQs
What does Napkins.dev generate?
It turns an uploaded wireframe, sketch, mockup, or screenshot into a runnable React front end styled with Tailwind CSS.
Is Napkins.dev free?
Yes. The public generator has no published paid plan, and the source code is available under the MIT license. Self-hosting still costs money for model inference, storage, and hosting.
Is Napkins.dev open source?
Yes. The official Nutlope/napkins repository is public under the MIT license.
Which AI model does Napkins.dev use?
The current hosted page and repository identify Kimi K2.5 served through Together AI. Older articles may refer to earlier Llama vision models used by previous versions.
Can Napkins.dev build a production app from a screenshot?
It can create a useful front-end starting point, but a screenshot cannot define backend logic, security, data, permissions, accessibility, tests, or production operations. Those still require implementation and review.
Can I self-host Napkins.dev?
Yes. The repository documents local deployment with a Together AI API key, S3-compatible image storage credentials, and the normal Next.js dependencies.
Bottom line
Our Napkins.dev verdict
Napkins.dev is a good lightweight accelerator when a visual reference already exists and a developer wants a React/Tailwind starting point. Its open source and narrow scope are advantages, but the generated result should be treated as disposable prototype code until it has been integrated with the real design system, application logic, accessibility requirements, and tests.
Visit Napkins.dev website ↗Similar Coding Tools
View all Coding AI tools →
Together AI
Build generative AI models with expert support.
Helicone
Observability platform for managing LLM performance.
Molmo by Ai2
Multimodal language model for diverse applications.
Meta Llama Models
Meta Llama Models: Llama models from meta offer open-source, state-of-the-art foundational models for research and deployment.
AI training for the future of work.
Get access to all our AI courses, hundreds of real-world AI use cases, live expert-led workshops, an exclusive network of AI early adopters, and more.
AI Courses
Get unlimited access to all of our current & upcoming industry-specific AI courses for the duration of your subscription.
Daily Guides
To keep up with the rapid pace of AI, our team publishes AI implementation guides daily. Our library contains 300+ practical use cases to automate real-world work.
Workshops
Join weekly, live, interactive sessions with industry leaders who are at the forefront of AI for hands-on implementation guidance and exclusive insights.
Community
Network with an exclusive community of AI-first professionals who are working smarter with AI. Learn how early adopters are using AI in their work and businesses.