Prompt2Web — AI Website Generator

\n Describe it. We build it.\n

\n Turn your ideas into fully designed websites in seconds using AI.\n Just type a prompt and watch the magic happen.\n

\n\n {/* Input Area */}\n

\n setPrompt(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder=\"Describe the website you want to create...\"\n rows={3}\n className=\"w-full bg-transparent text-white placeholder-gray-600 text-base resize-none outline-none\"\n disabled={loading}\n />\n

\n \n {prompt.length > 0 ? `${prompt.length} chars` : \"Enter ↵ to generate\"}\n \n

\n \n {loading ? (\n <>\n \n Generating...\n \n ) : (\n <>\n \n Generate\n \n )}\n \n

\n\n {/* Error */}\n {error && (\n

\n ⚠️ {error}\n

\n )}\n\n {/* Loading State */}\n {loading && (\n

\n AI is crafting your website...\n

\n )}\n\n {/* Preview Section — Sandboxed Iframe */}\n {generatedHtml && !loading && (\n

\n {/* Toolbar */}\n

\n \n Preview\n

\n {/* View Mode Toggle */}\n

\n setViewMode(\"preview\")}\n className={`px-3 py-1 text-xs rounded-md transition-all ${viewMode === \"preview\" ? \"bg-gray-700 text-white\" : \"text-gray-500 hover:text-gray-300\"}`}\n >\n 👁 Preview\n \n setViewMode(\"code\")}\n className={`px-3 py-1 text-xs rounded-md transition-all ${viewMode === \"code\" ? \"bg-gray-700 text-white\" : \"text-gray-500 hover:text-gray-300\"}`}\n >\n {\"\"} Code\n \n

\n\n {/* Viewport Switcher (only in preview mode) */}\n {viewMode === \"preview\" && (\n

\n setViewport(\"desktop\")}\n title=\"Desktop\"\n className={`p-1.5 rounded-md transition-all ${viewport === \"desktop\" ? \"bg-gray-700 text-cyan-400\" : \"text-gray-500 hover:text-gray-300\"}`}\n >\n \n \n setViewport(\"tablet\")}\n title=\"Tablet (768px)\"\n className={`p-1.5 rounded-md transition-all ${viewport === \"tablet\" ? \"bg-gray-700 text-cyan-400\" : \"text-gray-500 hover:text-gray-300\"}`}\n >\n \n \n setViewport(\"mobile\")}\n title=\"Mobile (375px)\"\n className={`p-1.5 rounded-md transition-all ${viewport === \"mobile\" ? \"bg-gray-700 text-cyan-400\" : \"text-gray-500 hover:text-gray-300\"}`}\n >\n \n \n

\n )}\n

\n\n {/* Preview Iframe */}\n {viewMode === \"preview\" ? (\n

\n \n \n

\n \n {viewport === \"desktop\" ? \"Desktop\" : viewport === \"tablet\" ? \"Tablet (768px)\" : \"Mobile (375px)\"} view\n \n \n Sandboxed • allow-scripts\n \n

\n ) : (\n /* Code View */\n

\n                    {generatedHtml}\n

\n \n {generatedHtml.length} characters\n \n { navigator.clipboard.writeText(generatedHtml); }}\n className=\"text-xs text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-1\"\n >\n 📋 Copy HTML\n \n

\n )}\n

\n )}\n\n {/* Example Prompts */}\n {!generatedHtml && !loading && (\n

Try one of these

\n {[\n \"A landing page for a coffee shop\",\n \"A portfolio site for a photographer\",\n \"A pricing page with 3 tiers\",\n \"A dashboard with analytics cards\",\n ].map((example) => (\n setPrompt(example)}\n className=\"px-3 py-1.5 text-xs text-gray-400 bg-gray-800/40 border border-gray-800 rounded-full hover:border-gray-700 hover:text-gray-300 transition-all\"\n >\n {example}\n \n ))}\n

\n )}\n

\n Prompt2Web\n

\n Describe it. We build it.\n

\n \n Preview\n

Hello World 🚀