[{"_1":2,"_127":-5,"_128":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_126":-5,"_123":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_5":42,"_53":39,"_54":55,"_56":55,"_57":58,"_59":55,"_60":55,"_61":55,"_62":55,"_63":55,"_64":17,"_65":17,"_66":67,"_68":69,"_70":71,"_72":73,"_89":-5,"_90":17,"_91":92,"_123":29,"_124":125},"id","087fc9f589024bfdc4ef","isMyApp",false,"name","metabuilder","description","Create mind-bending app inception with this meta development platform! Design and launch your own dev.fun or buidl.fun experiences without writing a single line of code, while watching your creations come to life in real-time.","brief","Build your own app-building platforms in an infinite recursive loop of digital creation!","isLive",true,"tags",[],"cover","https://cdn.dev.fun/snapshot/087fc9f589024bfdc4ef/63304_53e1075f.webp","cdnUrl","https://cdn.dev.fun/app/087fc9f589024bfdc4ef/63304","createdAt",["D",1746584624466],"updatedAt",["D",1746584624866],"lastCommitId",["B","63304"],"tier",1,"credits",60,{"_14":43,"_44":45,"_46":-5,"_47":45,"_48":49,"_50":-5,"_51":52},"90085ba8-97a8-420a-9319-96ade5865447","uniqueId","73BrEdcLtgy3s8E1W4wq3FYtxAKUZoAqpqVh9uCYENcz","username","solanaWallet","displayName","73B...Ncz","bio","avatar","/avatar.svg","commitCount","forkCount",0,"likeCount","runsCount",4,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","7gqgMeUmw2LQpoePqgyygQFf67pijxR6XSBP6z62pump","code","import { useState, useEffect } from 'react';\nimport { X, Undo, Redo, Save, Play, Monitor, Smartphone, EyeOff, ChevronUp, ChevronDown, Copy, Trash, LayoutGrid, Move, Download } from 'lucide-react';\nexport default function App() {\n const [selectedElement, setSelectedElement] = useState(null);\n const [elements, setElements] = useState([]);\n const [history, setHistory] = useState([]);\n const [historyIndex, setHistoryIndex] = useState(-1);\n const [showPreview, setShowPreview] = useState(true);\n const [viewMode, setViewMode] = useState('desktop');\n const [expandedPanels, setExpandedPanels] = useState({\n components: true,\n properties: true,\n layers: true\n });\n const [appName, setAppName] = useState('My Amazing App');\n const [appDescription, setAppDescription] = useState('Built with MetaBuilder');\n const [previewScale, setPreviewScale] = useState(1);\n const [draggedElement, setDraggedElement] = useState(null);\n const [dragOver, setDragOver] = useState(false);\n const [showSuccess, setShowSuccess] = useState(false);\n const componentLibrary = [{\n type: 'heading',\n label: 'Heading',\n icon: 'H1',\n properties: {\n text: 'Awesome Heading',\n fontSize: 32,\n color: '#000000',\n align: 'center'\n }\n }, {\n type: 'paragraph',\n label: 'Paragraph',\n icon: 'P',\n properties: {\n text: 'This is some text content that you can edit.',\n fontSize: 16,\n color: '#333333',\n align: 'left'\n }\n }, {\n type: 'button',\n label: 'Button',\n icon: '[]',\n properties: {\n text: 'Click Me',\n backgroundColor: '#3b82f6',\n color: '#ffffff',\n borderRadius: 8,\n size: 'medium'\n }\n }, {\n type: 'image',\n label: 'Image',\n icon: '🖼️',\n properties: {\n src: 'https://picsum.photos/300/200',\n alt: 'Placeholder image',\n width: 300,\n height: 200\n }\n }, {\n type: 'container',\n label: 'Container',\n icon: '⬚',\n properties: {\n backgroundColor: '#f9fafb',\n padding: 16,\n borderRadius: 8,\n width: '100%',\n direction: 'column'\n }\n }, {\n type: 'input',\n label: 'Input',\n icon: '⌨️',\n properties: {\n placeholder: 'Enter text here...',\n width: '100%',\n borderColor: '#d1d5db'\n }\n }, {\n type: 'card',\n label: 'Card',\n icon: '🃏',\n properties: {\n title: 'Card Title',\n content: 'Card content goes here',\n backgroundColor: '#ffffff',\n shadow: 'medium'\n }\n }, {\n type: 'divider',\n label: 'Divider',\n icon: '—',\n properties: {\n color: '#e5e7eb',\n thickness: 1\n }\n }, {\n type: 'spacer',\n label: 'Spacer',\n icon: '↕️',\n properties: {\n height: 32\n }\n }];\n useEffect(() => {\n if (elements.length > 0 && (historyIndex === -1 || JSON.stringify(elements) !== JSON.stringify(history[historyIndex]))) {\n const newHistory = history.slice(0, historyIndex + 1);\n newHistory.push([...elements]);\n setHistory(newHistory);\n setHistoryIndex(newHistory.length - 1);\n }\n }, [elements]);\n const togglePanel = panel => {\n setExpandedPanels({\n ...expandedPanels,\n [panel]: !expandedPanels[panel]\n });\n };\n const handleDragStart = component => {\n setDraggedElement({\n ...component,\n id: Date.now().toString()\n });\n };\n const handleDrop = e => {\n e.preventDefault();\n setDragOver(false);\n if (draggedElement) {\n const newElements = [...elements, draggedElement];\n setElements(newElements);\n setDraggedElement(null);\n }\n };\n const handleDragOver = e => {\n e.preventDefault();\n setDragOver(true);\n };\n const handleDragLeave = () => {\n setDragOver(false);\n };\n const selectElement = id => {\n const element = elements.find(el => el.id === id);\n setSelectedElement(element);\n };\n const updateElementProperty = (property, value) => {\n if (!selectedElement) return;\n const updatedElements = elements.map(el => {\n if (el.id === selectedElement.id) {\n return {\n ...el,\n properties: {\n ...el.properties,\n [property]: value\n }\n };\n }\n return el;\n });\n setElements(updatedElements);\n setSelectedElement({\n ...selectedElement,\n properties: {\n ...selectedElement.properties,\n [property]: value\n }\n });\n };\n const deleteElement = id => {\n setElements(elements.filter(el => el.id !== id));\n if (selectedElement && selectedElement.id === id) {\n setSelectedElement(null);\n }\n };\n const duplicateElement = element => {\n const newElement = {\n ...element,\n id: Date.now().toString()\n };\n setElements([...elements, newElement]);\n };\n const undo = () => {\n if (historyIndex > 0) {\n setHistoryIndex(historyIndex - 1);\n setElements([...history[historyIndex - 1]]);\n }\n };\n const redo = () => {\n if (historyIndex < history.length - 1) {\n setHistoryIndex(historyIndex + 1);\n setElements([...history[historyIndex + 1]]);\n }\n };\n const saveProject = () => {\n setShowSuccess(true);\n setTimeout(() => setShowSuccess(false), 3000);\n };\n const renderPreview = () => {\n return

\n {elements.length === 0 && !dragOver &&

\n \n

Drag components here to start building

}\n \n {elements.map(element =>

{\n e.stopPropagation();\n selectElement(element.id);\n }}>\n {renderElement(element)}\n {selectedElement?.id === element.id &&

\n \n \n \n

}\n

)}\n

;\n };\n const renderElement = element => {\n switch (element.type) {\n case 'heading':\n return

\n {element.properties.text}\n

;\n case 'paragraph':\n return

;\n case 'button':\n return ;\n case 'image':\n return {element.properties.alt}

;\n case 'container':\n return

Container (Drag components inside)

;\n case 'input':\n return ;\n case 'card':\n return

{element.properties.title}

{element.properties.content}

;\n case 'divider':\n return

;\n case 'spacer':\n return

\n {element.properties.height}px\n

;\n default:\n return

Unknown element type

;\n }\n };\n const renderPropertyEditor = () => {\n if (!selectedElement) return

\n Select an element to edit its properties\n

;\n const {\n properties\n } = selectedElement;\n return

{selectedElement.type.charAt(0).toUpperCase() + selectedElement.type.slice(1)} Properties

\n \n {Object.entries(properties).map(([key, value]) => {\n if (key === 'text' || key === 'placeholder' || key === 'alt' || key === 'title' || key === 'content') {\n return

\n {key}\n updateElementProperty(key, e.target.value)} className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n

;\n }\n if (key === 'color' || key === 'backgroundColor' || key === 'borderColor') {\n return

\n {key}\n

\n updateElementProperty(key, e.target.value)} className=\"w-8 h-8 border border-gray-300 rounded\" />\n updateElementProperty(key, e.target.value)} className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n

;\n }\n if (key === 'fontSize' || key === 'width' || key === 'height' || key === 'borderRadius' || key === 'padding' || key === 'thickness') {\n return

\n {key}\n updateElementProperty(key, parseInt(e.target.value) || 0)} className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n

;\n }\n if (key === 'align') {\n return

\n Text Align\n \n

;\n }\n if (key === 'size') {\n return

\n Size\n \n

;\n }\n if (key === 'shadow') {\n return

\n Shadow\n \n

;\n }\n if (key === 'direction') {\n return

\n Direction\n \n

;\n }\n if (key === 'src') {\n return

\n Image URL\n updateElementProperty(key, e.target.value)} className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n

;\n }\n return null;\n })}\n

;\n };\n return

\n {}\n

\n METABUILDER\n

\n buidl.fun & dev.fun\n

\n \n

\n \n \n

\n \n {}\n

\n {}\n

togglePanel('components')}>\n Components\n {expandedPanels.components ? : }\n

\n \n {expandedPanels.components &&

\n {componentLibrary.map((component, index) =>

handleDragStart(component)}>\n

\n {component.icon}\n

\n {component.label}\n

)}\n

}\n \n

togglePanel('properties')}>\n Properties\n {expandedPanels.properties ? : }\n

\n \n {expandedPanels.properties &&

\n {renderPropertyEditor()}\n

}\n \n

togglePanel('layers')}>\n Layers\n {expandedPanels.layers ? : }\n

\n \n {expandedPanels.layers &&

\n {elements.length === 0 ?

\n No elements added yet\n

\n {elements.map(element =>

selectElement(element.id)}>\n

\n {element.icon}\n {element.type.charAt(0).toUpperCase() + element.type.slice(1)}\n

\n \n

)}\n

}\n

\n \n {}\n

\n {}\n

\n \n \n

\n \n \n \n

\n Zoom:\n \n

\n \n

\n setAppName(e.target.value)} className=\"font-medium border-b border-transparent hover:border-gray-300 focus:border-indigo-500 focus:outline-none px-1 py-0.5\" placeholder=\"App Name\" />\n

\n \n \n

\n \n {}\n

\n {renderPreview()}\n

\n \n {}\n

\n App Settings\n

\n \n

\n App Name\n setAppName(e.target.value)} className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\" />\n

\n \n

\n Description\n

setAppDescription(e.target.value)} className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\" rows={3} />\n            </div>\n            \n            <div className=\"space-y-1\">\n              <label className=\"block text-sm font-medium text-gray-700\">Platform</label>\n              <div className=\"flex gap-2\">\n                <label className=\"inline-flex items-center cursor-pointer\">\n                  <input type=\"checkbox\" className=\"form-checkbox h-4 w-4 text-indigo-600\" defaultChecked />\n                  <span className=\"ml-2 text-sm text-gray-700\">dev.fun</span>\n                </label>\n                <label className=\"inline-flex items-center cursor-pointer\">\n                  <input type=\"checkbox\" className=\"form-checkbox h-4 w-4 text-indigo-600\" defaultChecked />\n                  <span className=\"ml-2 text-sm text-gray-700\">buidl.fun</span>\n                </label>\n              </div>\n            </div>\n            \n            <div className=\"space-y-1\">\n              <label className=\"block text-sm font-medium text-gray-700\">Theme</label>\n              <select className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500\">\n                <option>Default</option>\n                <option>Dark Mode</option>\n                <option>Light Mode</option>\n                <option>Neon</option>\n                <option>Minimal</option>\n              </select>\n            </div>\n            \n            <button className=\"w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 flex items-center justify-center gap-2\" onClick={saveProject}>\n              <Save size={18} />\n              Publish App\n            </button>\n            \n            <button className=\"w-full border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200 flex items-center justify-center gap-2\">\n              <Download size={18} />\n              Export Code\n            </button>\n          </div>\n        </div>\n      </div>\n      \n      {}\n      {showSuccess && <div className=\"fixed bottom-4 right-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 shadow-md rounded flex items-center space-x-3 animate-slideIn\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6 text-green-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n          </svg>\n          <div>\n            <div className=\"font-medium\">Success!</div>\n            <div className=\"text-sm\">Your app has been published to dev.fun & buidl.fun</div>\n          </div>\n        </div>}\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-dom\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"framer-motion\":\"10.16.4\"}}","token",{"_18":74,"_75":76,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86,"_87":39,"_88":39,"_66":67},"MataBuilder X DevFun","symbol","MataBuild","price",0.00000408,"marketcap",4237.1854622,"image","https://pump.mypinata.cloud/ipfs/QmWCUBfRwwfaSH2KZi54L4YbUkgYfHB1nAsiwSkcp5QsFj?img-width=256&img-dpr=2","website","https://dev.fun/p/087fc9f589024bfdc4ef","twitter","https://x.com/metabuilderfun","devCount","appCount","upstreamApp","isLordOfDev","analytics",[93,97,99,101,103,105,107,109,111,113,115,117,119,121],{"_94":95,"_96":55},"day","2025-04-24","runCount",{"_94":98,"_96":55},"2025-04-25",{"_94":100,"_96":55},"2025-04-26",{"_94":102,"_96":55},"2025-04-27",{"_94":104,"_96":55},"2025-04-28",{"_94":106,"_96":55},"2025-04-29",{"_94":108,"_96":55},"2025-04-30",{"_94":110,"_96":55},"2025-05-01",{"_94":112,"_96":55},"2025-05-02",{"_94":114,"_96":55},"2025-05-03",{"_94":116,"_96":55},"2025-05-04",{"_94":118,"_96":55},"2025-05-05",{"_94":120,"_96":55},"2025-05-06",{"_94":122,"_96":58},"2025-05-07","snapshot","ogImage","https://cdn.dev.fun/og/image/087fc9f589024bfdc4ef/9a118c01.webp","commitDetail","actionData","errors"]
</article></body></html>