{ "version": "2.8", "children": [ { "type": "frame", "id": "L0fRO", "x": 0, "y": 0, "name": "Brand Guide", "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "gap": 64, "padding": 80, "children": [ { "type": "frame", "id": "J2SrU", "name": "Title Block", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "F06Pq", "fill": "#0F172A", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "glLIJ", "fill": "#94A3B8", "content": "Brand Guide", "fontFamily": "Inter", "fontSize": 22, "fontWeight": "normal" }, { "type": "text", "id": "ttiZU", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "Visual identity system for the HTML-first reactive framework.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "LFlqJ", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "Cfyrf", "name": "Logo Section", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [ { "type": "text", "id": "SOqiP", "fill": "#94A3B8", "content": "LOGO", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "semibold", "letterSpacing": 3 }, { "type": "text", "id": "Fhu6B", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "The wordmark uses Space Grotesk Bold. The period separates 'No' from 'JS', reinforcing the dual meaning: a JS framework where you write no JS.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "bKDrm", "name": "Logo Variants", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "22cad", "name": "logoDark", "width": "fill_container", "height": 200, "fill": "#0F172A", "layout": "vertical", "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "70viJ", "fill": "#FFFFFF", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 52, "fontWeight": "bold", "letterSpacing": -1.5 }, { "type": "text", "id": "id8Ml", "fill": "#64748B", "content": "On Dark", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "medium" } ] }, { "type": "frame", "id": "l5MAY", "name": "logoLight", "width": "fill_container", "height": 200, "fill": "#F1F5F9", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "N9Ynw", "fill": "#0F172A", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 52, "fontWeight": "bold", "letterSpacing": -1.5 }, { "type": "text", "id": "2IBXf", "fill": "#94A3B8", "content": "On Light", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "medium" } ] }, { "type": "frame", "id": "MOE3X", "name": "logoBrand", "width": "fill_container", "height": 200, "fill": "#0EA5E9", "layout": "vertical", "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "fGXNe", "fill": "#FFFFFF", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 52, "fontWeight": "bold", "letterSpacing": -1.5 }, { "type": "text", "id": "QkOx0", "fill": "#BAE6FD", "content": "On Brand", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "medium" } ] } ] } ] }, { "type": "frame", "id": "Wk5wO", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "Xv4Gj", "name": "Color Palette", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [ { "type": "text", "id": "fip43", "fill": "#94A3B8", "content": "COLOR PALETTE", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "semibold", "letterSpacing": 3 }, { "type": "text", "id": "Sft5z", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "A restrained palette built on clean neutrals with a single vibrant sky-blue accent. The accent connects to the web and open technology. Red is reserved for destructive actions and the 'No' brand emphasis.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "C6G2T", "name": "Brand Colors", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "KFmXQ", "name": "sw1", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "eDQSl", "width": "fill_container", "height": 100, "fill": "#0EA5E9" }, { "type": "text", "id": "veyCa", "fill": "#0F172A", "content": "Sky Blue — Primary", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "medium" }, { "type": "text", "id": "n5UyU", "fill": "#94A3B8", "content": "#0EA5E9", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Xr423", "name": "sw2", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "tqTVh", "width": "fill_container", "height": 100, "fill": "#0F172A" }, { "type": "text", "id": "EIor8", "fill": "#0F172A", "content": "Slate 900 — Text", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "medium" }, { "type": "text", "id": "ZyAEU", "fill": "#94A3B8", "content": "#0F172A", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "gwEMJ", "name": "sw3", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "5LxiX", "width": "fill_container", "height": 100, "fill": "#64748B" }, { "type": "text", "id": "FMg5m", "fill": "#0F172A", "content": "Slate 500 — Secondary", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "medium" }, { "type": "text", "id": "4m3L6", "fill": "#94A3B8", "content": "#64748B", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "2VKKd", "name": "sw4", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "XQfMP", "width": "fill_container", "height": 100, "fill": "#F1F5F9", "stroke": { "thickness": 1, "fill": "#E2E8F0" } }, { "type": "text", "id": "Dialy", "fill": "#0F172A", "content": "Slate 100 — Surface", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "medium" }, { "type": "text", "id": "Dbkf9", "fill": "#94A3B8", "content": "#F1F5F9", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "9xluM", "name": "sw5", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "paKm7", "width": "fill_container", "height": 100, "fill": "#EF4444" }, { "type": "text", "id": "is9lT", "fill": "#0F172A", "content": "Red 500 — Accent", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "medium" }, { "type": "text", "id": "Ulv4U", "fill": "#94A3B8", "content": "#EF4444", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "gYo4O", "name": "sw6", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "frame", "id": "Gsok8", "width": "fill_container", "height": 100, "fill": "#22C55E" }, { "type": "text", "id": "Vptyt", "fill": "#0F172A", "content": "Green 500 — Success", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "medium" }, { "type": "text", "id": "lHq6N", "fill": "#94A3B8", "content": "#22C55E", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "w07Cg", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "puDow", "name": "Typography", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [ { "type": "text", "id": "GBaUD", "fill": "#94A3B8", "content": "TYPOGRAPHY", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "semibold", "letterSpacing": 3 }, { "type": "text", "id": "ldwvK", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Two typefaces form the system. Space Grotesk provides geometric authority for headings, metrics, and the logo. Inter handles body text, descriptions, and labels with excellent readability.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "7fRQc", "name": "Font Families", "width": "fill_container", "gap": 48, "children": [ { "type": "frame", "id": "0PRJ5", "name": "fontA", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "xcpZQ", "fill": "#0F172A", "content": "Space Grotesk", "fontFamily": "Space Grotesk", "fontSize": 32, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "text", "id": "dIhHu", "fill": "#64748B", "content": "ABCDEFGHIJKLMNOPQRSTUVWXYZ\nabcdefghijklmnopqrstuvwxyz\n0123456789 !@#$%", "lineHeight": 1.8, "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "normal" }, { "type": "text", "id": "v2zYk", "fill": "#94A3B8", "content": "Used for: Headlines · Logo · Navigation · Buttons · Metrics", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "zUsUr", "name": "fontB", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "6c64M", "fill": "#0F172A", "content": "Inter", "fontFamily": "Inter", "fontSize": 32, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "text", "id": "LGWUH", "fill": "#64748B", "content": "ABCDEFGHIJKLMNOPQRSTUVWXYZ\nabcdefghijklmnopqrstuvwxyz\n0123456789 !@#$%", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" }, { "type": "text", "id": "HW2yW", "fill": "#94A3B8", "content": "Used for: Body text · Descriptions · Labels · Code annotations", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "oyLBS", "name": "Divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "36h3i", "name": "Type Scale", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [ { "type": "text", "id": "QpiMa", "name": "sLabel", "fill": "#94A3B8", "content": "TYPE SCALE", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "semibold", "letterSpacing": 3 }, { "type": "text", "id": "fTDgN", "name": "sDesc", "fill": "#64748B", "content": "A consistent type scale creates visual rhythm and hierarchy across all pages and components.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "0HDYq", "name": "Scale Rows", "width": "fill_container", "layout": "vertical", "gap": 24, "children": [ { "type": "frame", "id": "Sxhf9", "name": "row1", "width": "fill_container", "gap": 16, "children": [ { "type": "text", "id": "jzEzy", "name": "r1l", "fill": "#94A3B8", "content": "64px", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "pergy", "name": "r1s", "fill": "#0F172A", "content": "Page Title", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold", "letterSpacing": -1 } ] }, { "type": "frame", "id": "TRtqQ", "name": "row2", "width": "fill_container", "gap": 16, "children": [ { "type": "text", "id": "Sh6v1", "name": "r2l", "fill": "#94A3B8", "content": "36px", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "wsST6", "name": "r2s", "fill": "#0F172A", "content": "Section Heading", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "semibold", "letterSpacing": -0.5 } ] }, { "type": "frame", "id": "hI6FC", "name": "row3", "width": "fill_container", "gap": 16, "children": [ { "type": "text", "id": "p2vhz", "name": "r3l", "fill": "#94A3B8", "content": "20px", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "gGFNC", "name": "r3s", "fill": "#64748B", "content": "Subheading or lead paragraph", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" } ] }, { "type": "frame", "id": "BSkzc", "name": "row4", "width": "fill_container", "gap": 16, "children": [ { "type": "text", "id": "cEoMM", "name": "r4l", "fill": "#94A3B8", "content": "15px", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "e8cre", "name": "r4s", "fill": "#64748B", "content": "Body text for paragraphs and descriptions.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "VLW8a", "name": "row5", "width": "fill_container", "gap": 16, "children": [ { "type": "text", "id": "awDZi", "name": "r5l", "fill": "#94A3B8", "content": "13px", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "bPI67", "name": "r5s", "fill": "#0F172A", "content": "SECTION LABELS AND NAVIGATION", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "semibold", "letterSpacing": 2 } ] }, { "type": "frame", "id": "D7kkS", "name": "row6", "width": "fill_container", "gap": 16, "children": [ { "type": "text", "id": "e8WTc", "name": "r6l", "fill": "#94A3B8", "content": "12px", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "fvjab", "name": "r6s", "fill": "#94A3B8", "content": "Captions, metadata, and auxiliary information", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "FPWyk", "name": "div1", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "h08Xv", "name": "vtSection", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [ { "type": "text", "id": "H0ra3", "name": "vtLabel", "fill": "#94A3B8", "content": "VOICE & TONE", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "normal", "letterSpacing": 3 }, { "type": "text", "id": "Bcwwm", "name": "vtDesc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "NoJS speaks with confident clarity. We're direct without being curt, technical without being gatekeeping, and opinionated without being preachy. The name itself is a statement — embrace the irony.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "fVGZf", "name": "vtRow", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "d2OZ5", "name": "doCol", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "cQGA8", "name": "doTitle", "fill": "#22C55E", "content": "Do", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "normal" }, { "type": "text", "id": "dSiwk", "name": "doExamples", "fill": "#64748B", "content": "→ \"Add reactivity with a single HTML attribute.\"\n→ \"No build step. No config files. Just HTML.\"\n→ \"Ship features, not boilerplate.\"\n→ \"Works in any browser. Right now.\"", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "tkKOX", "name": "dontCol", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "6I7sO", "name": "dontTitle", "fill": "#EF4444", "content": "Don't", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "normal" }, { "type": "text", "id": "4vKoN", "name": "dontExamples", "fill": "#64748B", "content": "✗ \"A revolutionary paradigm-shifting framework.\"\n✗ \"Simply leverage our enterprise synergies.\"\n✗ \"You've been doing it wrong all along.\"\n✗ \"Eliminates the need for real developers.\"", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "tNCtf", "name": "Divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "e6rgb", "name": "Brand Values", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [ { "type": "text", "id": "ljR1u", "name": "label", "fill": "#94A3B8", "content": "BRAND VALUES", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "normal", "letterSpacing": 3 }, { "type": "frame", "id": "Sr6v5", "name": "Values Row", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "02oQe", "name": "Value Card 1", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "nWSzH", "name": "num1", "fill": "#0EA5E9", "content": "01", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "VKtzW", "name": "title1", "fill": "#0F172A", "content": "Simplicity First", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "normal" }, { "type": "text", "id": "vGoKZ", "name": "desc1", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Complexity is the enemy. Every feature must earn its place by reducing developer effort, not adding to it.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "lYhXz", "name": "Value Card 2", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "RQaOI", "name": "num2", "fill": "#0EA5E9", "content": "02", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "37c2H", "name": "title2", "fill": "#0F172A", "content": "HTML-Native", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "normal" }, { "type": "text", "id": "iX8mc", "name": "desc2", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "The browser already speaks HTML. We extend that language with declarative attributes instead of inventing a new one.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "aDfAp", "name": "Value Card 3", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "goWrQ", "name": "num3", "fill": "#0EA5E9", "content": "03", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "QFDSY", "name": "title3", "fill": "#0F172A", "content": "Zero Overhead", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "normal" }, { "type": "text", "id": "jIEeo", "name": "desc3", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "No build step. No transpiler. No virtual DOM. Ship what you write — the browser runs it directly.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "u7zRO", "name": "Value Card 4", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "R86fd", "name": "num4", "fill": "#0EA5E9", "content": "04", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "0hpZs", "name": "title4", "fill": "#0F172A", "content": "Progressive Power", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "normal" }, { "type": "text", "id": "Jc6km", "name": "desc4", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Start with a single attribute. Scale to a full SPA. The framework grows with your needs — never ahead of them.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "f9ZlP", "name": "div2", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "KrS6L", "name": "uiSection", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [ { "type": "text", "id": "FcS86", "name": "uiLabel", "fill": "#94A3B8", "content": "UI ELEMENTS", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "normal", "letterSpacing": 3 }, { "type": "text", "id": "i14ku", "name": "btnSubtitle", "fill": "#0F172A", "content": "Buttons", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "aZIWL", "name": "btnRow", "width": "fill_container", "gap": 24, "alignItems": "center", "children": [ { "type": "frame", "id": "rcWiM", "name": "primaryBtn", "fill": "#0EA5E9", "padding": [ 14, 28 ], "children": [ { "type": "text", "id": "hVBLS", "name": "primaryTxt", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ybVFd", "name": "secondaryBtn", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "padding": [ 14, 28 ], "children": [ { "type": "text", "id": "kgYll", "name": "secondaryTxt", "fill": "#0F172A", "content": "View on GitHub", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "1e4BA", "name": "darkBtn", "fill": "#0F172A", "padding": [ 14, 28 ], "children": [ { "type": "text", "id": "kPEoQ", "name": "darkTxt", "fill": "#FFFFFF", "content": "Documentation", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "GzEfv", "name": "badge", "fill": "#F0F9FF", "padding": [ 6, 14 ], "children": [ { "type": "text", "id": "2EnHZ", "name": "badgeTxt", "fill": "#0EA5E9", "content": "~14KB gzipped", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "text", "id": "wGqwg", "name": "codeSubtitle", "fill": "#0F172A", "content": "Code Blocks", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "eAyYB", "name": "darkCode", "width": "fill_container", "fill": "#0F172A", "padding": [ 20, 24 ], "children": [ { "type": "text", "id": "mFs46", "name": "darkCodeTxt", "fill": "#E2E8F0", "content": "$ npm install nojs-framework", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "FQ1z6", "name": "lightCode", "width": "fill_container", "fill": "#F8FAFC", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "padding": [ 20, 24 ], "children": [ { "type": "text", "id": "5qj76", "name": "lightCodeTxt", "fill": "#334155", "content": "
\n

\n \n
", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "6KyPi", "name": "div3", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "9cxij", "name": "tagSection", "width": "fill_container", "layout": "vertical", "gap": 16, "padding": [ 40, 0 ], "alignItems": "center", "children": [ { "type": "text", "id": "OX5Mh", "name": "tagTitle", "fill": "#0F172A", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "normal", "letterSpacing": -1 }, { "type": "text", "id": "nw5E5", "name": "tagSub", "fill": "#64748B", "content": "HTML-first reactivity. No JavaScript required.", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "normal" }, { "type": "text", "id": "QIX7u", "name": "tagMeta", "fill": "#94A3B8", "content": "~14KB gzipped · Zero dependencies · No build step", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "AD7cM", "x": 0, "y": 10000, "name": "LP v1 — Original", "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "J6YnZ", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "TyglF", "name": "Hero", "width": "fill_container", "layout": "vertical", "gap": 32, "padding": [ 100, 80, 80, 80 ], "alignItems": "center", "children": [ { "id": "0nji9", "type": "ref", "ref": "xaxNV", "name": "badge", "width": "fit_content", "height": "fit_content", "x": 545, "y": 100, "descendants": { "ibm3N": { "content": "~14KB gzipped · Zero dependencies · No build step", "x": 16, "y": 8 } } }, { "type": "text", "id": "Q5o44", "name": "headline1", "fill": "#0F172A", "content": "HTML-first reactivity.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 72, "fontWeight": "bold" }, { "type": "text", "id": "1COJm", "name": "headline2", "fill": "#0EA5E9", "content": "No JavaScript required.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 72, "fontWeight": "bold" }, { "type": "text", "id": "KrENN", "name": "subline", "fill": "#64748B", "textGrowth": "fixed-width", "width": 700, "content": "Build dynamic, reactive web applications using nothing but HTML attributes. No build step. No virtual DOM. No transpiler. No JSX.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" }, { "type": "frame", "id": "croLQ", "name": "CTA Row", "gap": 16, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "qHREq", "name": "Primary CTA", "fill": "#0EA5E9", "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "iVSqg", "name": "primaryBtnText", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "semibold" } ] }, { "type": "frame", "id": "M1cd5", "name": "Secondary CTA", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "k46zG", "name": "secondaryBtnText", "fill": "#0F172A", "content": "View on GitHub", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "medium" } ] } ] }, { "type": "frame", "id": "R1Vwh", "name": "Install Bar", "fill": "#F1F5F9", "padding": [ 12, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "JoVph", "name": "installText", "fill": "#64748B", "content": "$ npm install no-js", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "medium" } ] } ] }, { "type": "frame", "id": "o2omX", "name": "Code Example Section", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 16, "padding": 80, "alignItems": "center", "children": [ { "id": "Z45ez", "type": "ref", "ref": "AP166", "name": "sectionHeader", "width": "fill_container", "height": "fit_content", "x": 80, "y": 80, "descendants": { "5cleo": { "content": "See it in action", "width": "fill_container" }, "vYiJ2": { "content": "Real API data. Zero JavaScript. Just HTML attributes.", "width": "fill_container", "y": 77 } } }, { "type": "frame", "id": "HwBvU", "name": "Spacer", "width": "fill_container", "height": 44 }, { "type": "frame", "id": "XTzs7", "name": "Panels Container", "width": "fill_container", "children": [ { "type": "frame", "id": "1glFO", "name": "Code Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": 32, "children": [ { "type": "frame", "id": "F8Yir", "name": "Code Top Bar", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "ISAbn", "name": "dots", "fill": "#64748B", "content": "● ● ●", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "FZx4p", "name": "fname", "fill": "#64748B", "content": "index.html", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "text", "id": "k8S0E", "name": "code", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "
\n
\n

\n

\n
\n
", "lineHeight": 1.6, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "Hi5Rz", "name": "label", "fill": "#0EA5E9", "content": "That's it. No JavaScript.", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "medium" } ] }, { "type": "frame", "id": "jmT8e", "name": "Preview Panel", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "gap": 20, "padding": 32, "children": [ { "type": "frame", "id": "LSHHh", "name": "Preview Top Bar", "width": "fill_container", "alignItems": "center", "children": [ { "type": "text", "id": "mRXc1", "name": "prevLabel", "fill": "#64748B", "content": "Preview", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "medium" } ] }, { "type": "frame", "id": "n7bjM", "name": "User Card 1", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "XAXG0", "name": "name1", "fill": "#0F172A", "content": "Leanne Graham", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "semibold" }, { "type": "text", "id": "6eSQY", "name": "email1", "fill": "#64748B", "content": "sincere@april.biz", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "HSa60", "name": "Divider 1", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "3sxdv", "name": "User Card 2", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "Ike5w", "name": "name2", "fill": "#0F172A", "content": "Ervin Howell", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "semibold" }, { "type": "text", "id": "wQ3WW", "name": "email2", "fill": "#64748B", "content": "shanna@melissa.tv", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "WIkjg", "name": "Divider 2", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "yChCt", "name": "User Card 3", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "OKLgx", "name": "name3", "fill": "#0F172A", "content": "Clementine Bauch", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "semibold" }, { "type": "text", "id": "jgHXe", "name": "email3", "fill": "#64748B", "content": "nathan@yesenia.net", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "Tuigx", "name": "Features Section", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "gap": 60, "padding": [ 100, 80 ], "alignItems": "center", "children": [ { "id": "8c1lk", "type": "ref", "ref": "AP166", "name": "featuresHeader", "width": "fill_container", "height": "fit_content", "x": 80, "y": 100, "descendants": { "5cleo": { "content": "Everything you need", "width": "fill_container" }, "vYiJ2": { "content": "A complete toolkit for building reactive web apps — all from HTML attributes.", "width": "fill_container", "y": 77 } } }, { "type": "frame", "id": "SNVMr", "name": "Features Grid", "width": "fill_container", "layout": "vertical", "gap": 24, "children": [ { "type": "frame", "id": "eQW5N", "name": "Row 1", "width": "fill_container", "gap": 24, "children": [ { "id": "Itk7o", "type": "ref", "ref": "5c6m2", "name": "cardDeclarativeHTTP", "width": "fill_container", "height": "fit_content", "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "content": "arrow-up-down", "name": "arrow-up-down", "x": 12, "y": 12 }, "AyW03": { "content": "Declarative HTTP", "x": 32, "y": 96 }, "I73kS": { "content": "Fetch, post, and mutate data with simple HTML attributes. get, post, put, patch, delete — no fetch() calls needed.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "GTWzY", "type": "ref", "ref": "5c6m2", "name": "cardReactiveBinding", "width": "fill_container", "height": "fit_content", "x": 434.6666666666667, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "content": "zap", "name": "zap", "x": 12, "y": 12 }, "AyW03": { "content": "Reactive Binding", "x": 32, "y": 96 }, "I73kS": { "content": "One-way and two-way data binding with bind and model. Changes propagate instantly through the DOM.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "1CFQA", "type": "ref", "ref": "5c6m2", "name": "cardStateManagement", "width": "fill_container", "height": "fit_content", "x": 869.3333333333334, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "content": "database", "name": "database", "x": 12, "y": 12 }, "AyW03": { "content": "State Management", "x": 32, "y": 96 }, "I73kS": { "content": "Local state with state, global state with store, plus computed properties and watchers — all declarative.", "width": "fill_container", "x": 32, "y": 138 } } } ] }, { "type": "frame", "id": "PNm7Y", "name": "Row 2", "width": "fill_container", "gap": 24, "children": [ { "id": "klygT", "type": "ref", "ref": "5c6m2", "name": "cardSPARouting", "width": "fill_container", "height": "fit_content", "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "content": "route", "name": "route", "x": 12, "y": 12 }, "AyW03": { "content": "SPA Routing", "x": 32, "y": 96 }, "I73kS": { "content": "Client-side routing with route and route-view. Supports guards, params, nested routes, and history mode.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "u4SDM", "type": "ref", "ref": "5c6m2", "name": "cardFormsValidation", "width": "fill_container", "height": "fit_content", "x": 434.6666666666667, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "content": "check-square", "name": "check-square", "x": 12, "y": 12 }, "AyW03": { "content": "Forms & Validation", "x": 32, "y": 96 }, "I73kS": { "content": "Built-in validators, custom rules, and a $form context object. No validation library required.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "iahDW", "type": "ref", "ref": "5c6m2", "name": "cardAnimationsI18n", "width": "fill_container", "height": "fit_content", "x": 869.3333333333334, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "content": "sparkles", "name": "sparkles", "x": 12, "y": 12 }, "AyW03": { "content": "Animations & i18n", "x": 32, "y": 96 }, "I73kS": { "content": "CSS animations via animate and transition directives with stagger support. Plus built-in i18n with pluralization.", "width": "fill_container", "x": 32, "y": 138 } } } ] } ] } ] }, { "type": "frame", "id": "w4GTJ", "name": "Final CTA Section", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 24, "padding": [ 100, 80 ], "alignItems": "center", "children": [ { "type": "text", "id": "t3CKL", "name": "ctaHeadline", "fill": "#FFFFFF", "textGrowth": "fixed-width", "width": "fill_container", "content": "Start building with No.JS", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold" }, { "type": "text", "id": "eHEYb", "name": "ctaSubtitle", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "The best JavaScript is the JavaScript you don't write.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" }, { "type": "frame", "id": "YOHWm", "name": "CTA Buttons", "gap": 16, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "VR4Fe", "name": "Get Started Button", "fill": "#0EA5E9", "padding": [ 16, 36 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "jAyR0", "name": "primaryBtnText", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "semi-bold" } ] }, { "type": "frame", "id": "pCXTs", "name": "Read Docs Button", "stroke": { "thickness": 1, "fill": "#334155" }, "padding": [ 16, 36 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "XkRSV", "name": "secondaryBtnText", "fill": "#FFFFFF", "content": "Read the Docs", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "medium" } ] } ] }, { "type": "text", "id": "AN3bN", "name": "installCmd", "fill": "#64748B", "content": "$ npm install no-js", "textAlign": "center", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "id": "vCCIv", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 2706, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "QHM7P", "x": 0, "y": 3889, "name": "Component Library", "width": 1440, "height": 4500, "fill": "#FFFFFF", "layout": "vertical", "gap": 60, "padding": 80, "children": [ { "type": "text", "id": "GZ07k", "name": "t1", "fill": "#0F172A", "content": "Component Library", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold" }, { "type": "frame", "id": "wwfre", "name": "btnRow", "width": "fill_container", "gap": 32, "alignItems": "center", "children": [ { "type": "frame", "id": "AUQGw", "name": "PrimaryButton", "reusable": true, "fill": "#0EA5E9", "padding": [ 12, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "NE58w", "name": "t3", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "600" } ] }, { "type": "frame", "id": "E6zHk", "name": "SecondaryButton", "reusable": true, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "padding": [ 12, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "R53vr", "name": "t4", "fill": "#0F172A", "content": "Read Docs", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "500" } ] }, { "type": "frame", "id": "d3Org", "name": "DarkPrimaryButton", "reusable": true, "fill": "#0EA5E9", "padding": [ 12, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "vylqP", "name": "t5", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "600" } ] }, { "type": "frame", "id": "YeyCS", "name": "DarkOutlineButton", "reusable": true, "stroke": { "thickness": 1, "fill": "#334155" }, "padding": [ 12, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "7D627", "name": "t6", "fill": "#FFFFFF", "content": "Read Docs", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "500" } ] } ] }, { "type": "text", "id": "mU4un", "name": "t2", "fill": "#0F172A", "content": "Buttons", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "xaxNV", "name": "Badge", "reusable": true, "fill": "#F0F9FF", "cornerRadius": 100, "padding": [ 8, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "ibm3N", "name": "t8", "fill": "#0EA5E9", "content": "Badge Text", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "text", "id": "PdOL7", "name": "t7", "fill": "#0F172A", "content": "Badge", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "AP166", "name": "SectionHeader", "reusable": true, "width": "fill_container", "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ { "type": "text", "id": "5cleo", "name": "st", "fill": "#0F172A", "textGrowth": "fixed-width", "width": "fill_container", "content": "Section Title", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold" }, { "type": "text", "id": "vYiJ2", "name": "ss", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "A brief description of the section goes here.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "normal" } ] }, { "type": "text", "id": "dmPm5", "name": "t9", "fill": "#0F172A", "content": "Section Header", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "5c6m2", "name": "FeatureCard", "reusable": true, "width": "fill_container", "fill": "#F8FAFC", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 32, "children": [ { "type": "frame", "id": "4bqQB", "name": "featureIcon", "width": 48, "height": 48, "fill": "#F0F9FF", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "AOME1", "name": "featureIconText", "width": 24, "height": 24, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "#0EA5E9" } ] }, { "type": "text", "id": "AyW03", "name": "t10", "fill": "#0F172A", "content": "Feature Name", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "600" }, { "type": "text", "id": "I73kS", "name": "featureDesc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "A short description of this feature and its benefits.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "text", "id": "kR9dC", "name": "t11", "fill": "#0F172A", "content": "Feature Card", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "BU3E9", "name": "PageHeader", "reusable": true, "width": "fill_container", "height": 70, "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "padding": [ 0, 80 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "I9WGi", "name": "logoGroup", "height": "fill_container", "gap": 8, "alignItems": "center", "children": [ { "type": "rectangle", "id": "Hd14D", "name": "logoImg", "fill": { "type": "image", "enabled": true, "url": "images/logo.png", "mode": "stretch" }, "width": 28, "height": 28 }, { "type": "text", "id": "KInhD", "name": "t13", "fill": "#0F172A", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" }, { "type": "frame", "id": "vcBs8", "name": "vBadge", "fill": "#F0F9FF", "cornerRadius": 100, "padding": [ 2, 8 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "DAx4w", "name": "vLabel", "fill": "#0EA5E9", "content": "v1.10.0", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "TE8iy", "name": "rightGroup", "height": "fill_container", "gap": 32, "alignItems": "center", "children": [ { "type": "frame", "id": "Jw91v", "name": "hNav", "height": "fill_container", "gap": 32, "alignItems": "center", "children": [ { "type": "text", "id": "hNavHome", "name": "n0", "fill": "#64748B", "content": "Home", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "10WVH", "name": "n1", "fill": "#64748B", "content": "Features", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "dZ5Q4", "name": "n2", "fill": "#64748B", "content": "Examples", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "2dFBe", "name": "n3", "fill": "#64748B", "content": "FAQ", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "GphrL", "name": "n5", "fill": "#64748B", "content": "Playground", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "qJFiR", "name": "n6", "fill": "#64748B", "content": "Docs", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "path", "id": "FNzKS", "name": "githubIcon", "geometry": "M12 0c-6.63 0-12 5.37-12 12 0 5.31 3.435 9.795 8.205 11.385 0.6 0.105 0.825-0.255 0.825-0.57 0-0.285-0.015-1.23-0.015-2.235-3.015 0.555-3.795-0.735-4.035-1.41-0.135-0.345-0.72-1.41-1.23-1.695-0.42-0.225-1.02-0.78-0.015-0.795 0.945-0.015 1.62 0.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495 0.99 0.105-0.78 0.42-1.305 0.765-1.605-2.67-0.3-5.46-1.335-5.46-5.925 0-1.305 0.465-2.385 1.23-3.225-0.12-0.3-0.54-1.53 0.12-3.18 0 0 1.005-0.315 3.3 1.23 0.96-0.27 1.98-0.405 3-0.405s2.04 0.135 3 0.405c2.295-1.56 3.3-1.23 3.3-1.23 0.66 1.65 0.24 2.88 0.12 3.18 0.765 0.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925 0.435 0.375 0.81 1.095 0.81 2.22 0 1.605-0.015 2.895-0.015 3.3 0 0.315 0.225 0.69 0.825 0.57a12.02 12.02 0 0 0 8.175-11.385c0-6.63-5.37-12-12-12z", "fill": "#64748B", "width": 22, "height": 22 }, { "type": "path", "id": "od4kB", "name": "discordIcon", "geometry": "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515 0.074 0.074 0 0 0-0.079 0.037c-0.21 0.375-0.444 0.864-0.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-0.617-1.25 0.077 0.077 0 0 0-0.079-0.037 19.736 19.736 0 0 0-4.885 1.515 0.07 0.07 0 0 0-0.032 0.027c-3.112 4.649-3.965 9.183-3.546 13.66a0.082 0.082 0 0 0 0.031 0.057 19.9 19.9 0 0 0 5.993 3.03 0.078 0.078 0 0 0 0.084-0.028c0.462-0.63 0.874-1.295 1.226-1.994a0.076 0.076 0 0 0-0.041-0.106 13.107 13.107 0 0 1-1.872-0.892 0.077 0.077 0 0 1-0.008-0.128 10.2 10.2 0 0 0 0.372-0.292 0.074 0.074 0 0 1 0.077-0.01c3.928 1.793 8.18 1.793 12.062 0a0.074 0.074 0 0 1 0.078 0.01c0.12 0.098 0.246 0.198 0.373 0.292a0.077 0.077 0 0 1-0.006 0.127 12.299 12.299 0 0 1-1.873 0.892 0.077 0.077 0 0 0-0.041 0.107c0.36 0.698 0.772 1.362 1.225 1.993a0.076 0.076 0 0 0 0.084 0.028 19.839 19.839 0 0 0 6.002-3.03 0.077 0.077 0 0 0 0.032-0.054c0.5-5.177-0.838-9.674-3.549-13.66a0.061 0.061 0 0 0-0.031-0.03z m-12.297 10.96c-1.183 0-2.157-1.085-2.157-2.419 0-1.333 0.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-0.956 2.418-2.157 2.418z m7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333 0.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-0.946 2.418-2.157 2.418z", "fill": "#64748B", "width": 24, "height": 18 } ] }, { "type": "frame", "id": "T3ETl", "name": "hCta", "fill": "#0EA5E9", "cornerRadius": 100, "padding": [ 10, 20 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "pIeZv", "name": "ct", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 14, "fontWeight": "600" } ] }, { "type": "frame", "id": "TwvA6", "name": "langDropdown", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "gap": 6, "padding": [ 6, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "Qmthf", "content": "🇧🇷", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "icon_font", "id": "dTwug", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "#64748B" } ] } ] } ] }, { "type": "text", "id": "F1hUj", "name": "t12", "fill": "#0F172A", "content": "Page Header", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "OIXap", "name": "PageFooter", "reusable": true, "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "layout": "vertical", "gap": 32, "padding": [ 40, 80 ], "children": [ { "type": "frame", "id": "AaPSd", "name": "fRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "nUjGT", "name": "fLeft", "layout": "vertical", "gap": 8, "children": [ { "type": "frame", "id": "zgjuV", "name": "logoGroup", "gap": 8, "alignItems": "center", "children": [ { "type": "rectangle", "id": "pDdcE", "name": "logoImg", "fill": { "type": "image", "enabled": true, "url": "images/logo.png", "mode": "stretch" }, "width": 28, "height": 28 }, { "type": "text", "id": "BlkH7", "name": "fl", "fill": "#FFFFFF", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" } ] }, { "type": "text", "id": "FySC8", "name": "ft", "fill": "#94A3B8", "content": "The HTML-first reactive framework", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ZI41K", "name": "fLinks", "gap": 32, "alignItems": "center", "children": [ { "type": "text", "id": "89P8s", "name": "l1", "fill": "#94A3B8", "content": "Features", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "lttC1", "name": "l2", "fill": "#94A3B8", "content": "Examples", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "IYix0", "name": "l3", "fill": "#94A3B8", "content": "FAQ", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "oOPDf", "name": "l4", "fill": "#94A3B8", "content": "Playground", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "YR8wf", "name": "l5", "fill": "#94A3B8", "content": "Docs", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "8k7dI", "name": "l6", "fill": "#94A3B8", "content": "GitHub", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "LQsDT", "name": "l7", "fill": "#94A3B8", "content": "Discord", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "KwKGc", "name": "fDivider", "width": "fill_container", "height": 1, "fill": "#1E293B" }, { "type": "frame", "id": "4zCTU", "name": "fBottom", "width": "fill_container", "justifyContent": "space_between", "children": [ { "type": "text", "id": "64e8T", "name": "cpTxt", "fill": "#64748B", "content": "2026 No.JS - MIT License", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "7LzA7", "name": "verTxt", "fill": "#64748B", "content": "No.JS v1.10.0", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "text", "id": "6wXy8", "name": "plabel", "fill": "#0F172A", "content": "Page Footer", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "zDasK", "name": "CodeBlock", "reusable": true, "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "padding": [ 24, 28 ], "children": [ { "type": "text", "id": "salq5", "name": "cb1", "fill": "#94A3B8", "content": "
", "lineHeight": 1.8, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "IAMDC", "name": "cb2", "fill": "#64748B", "content": " Loading...", "lineHeight": 1.8, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "qfwvk", "name": "cb3", "fill": "#94A3B8", "content": "
", "lineHeight": 1.8, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "text", "id": "pYn06", "name": "cb_label", "fill": "#0F172A", "content": "Code Block", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "GYvmw", "name": "HighlightItem", "reusable": true, "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ { "type": "icon_font", "id": "NM3dy", "name": "hlIcon", "width": 20, "height": 20, "iconFontFamily": "lucide", "fill": "#0EA5E9" }, { "type": "text", "id": "t5rMw", "name": "hlText", "fill": "#334155", "content": "Highlight text goes here", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "text", "id": "9QD7T", "name": "hl_label", "fill": "#0F172A", "content": "Highlight Item", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "zZ30X", "name": "HeroSection", "reusable": true, "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 20, "padding": [ 60, 80 ], "alignItems": "center", "children": [ { "type": "frame", "id": "yj5cg", "name": "heroBadge", "fill": "#F0F9FF", "cornerRadius": 100, "padding": [ 8, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "x1nuT", "name": "heroBadgeText", "fill": "#0EA5E9", "content": "Badge Text", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "500" } ] }, { "type": "text", "id": "3iBsZ", "name": "heroTitle", "fill": "#0F172A", "content": "Page Title", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold" }, { "type": "text", "id": "aeLdw", "name": "heroSubtitle", "fill": "#64748B", "content": "A brief description of this page.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "normal" } ] }, { "type": "text", "id": "CRnuU", "name": "hero_label", "fill": "#0F172A", "content": "Hero Section", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "CaSRr", "name": "CTASection", "reusable": true, "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 20, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "GZpIo", "name": "ctaTitle", "fill": "#FFFFFF", "content": "Ready to Build?", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "bold" }, { "type": "text", "id": "bCVoG", "name": "ctaSub", "fill": "#94A3B8", "content": "Start using No.JS today.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "normal" }, { "type": "frame", "id": "G35UI", "name": "ctaButtons", "gap": 16, "alignItems": "center", "children": [ { "type": "frame", "id": "F09N1", "name": "ctaBtn1", "fill": "#0EA5E9", "padding": [ 12, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "VDbZ0", "name": "ctaBtn1Text", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "600" } ] }, { "type": "frame", "id": "BlI0n", "name": "ctaBtn2", "stroke": { "thickness": 1, "fill": "#334155" }, "padding": [ 12, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "FdLAq", "name": "ctaBtn2Text", "fill": "#FFFFFF", "content": "Learn More", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "500" } ] } ] } ] }, { "type": "text", "id": "O7vMD", "name": "cta_label", "fill": "#0F172A", "content": "CTA Section", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "LLeQe", "name": "SidebarNavLink", "reusable": true, "width": "fill_container", "padding": [ 8, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "g1NfQ", "name": "snlText", "fill": "#64748B", "content": "Nav Link", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "text", "id": "S3hoz", "name": "snl_label", "fill": "#0F172A", "content": "Sidebar Nav Link", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "DZeSd", "name": "DocConceptCard", "reusable": true, "width": "fill_container", "stroke": { "align": "inside", "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 8, "padding": [ 20, 24 ], "children": [ { "type": "text", "id": "KhIfL", "name": "dccTitle", "fill": "#0F172A", "content": "Concept Title", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "Qw1wl", "name": "dccDesc", "fill": "#64748B", "content": "Description of the concept goes here.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "text", "id": "6LbGB", "name": "dcc_label", "fill": "#0F172A", "content": "Doc Concept Card", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" }, { "type": "frame", "id": "V0G8T", "name": "InfoCallout", "reusable": true, "width": "fill_container", "fill": "#F0F9FF", "stroke": { "align": "inside", "thickness": { "left": 3 }, "fill": "#0EA5E9" }, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "ktk59", "name": "icText", "fill": "#334155", "content": "Callout text goes here.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "text", "id": "YaUO6", "name": "ic_label", "fill": "#0F172A", "content": "Info Callout", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "600" } ] }, { "type": "frame", "id": "wejNg", "x": 4620, "y": 0, "name": "Features Page", "clip": true, "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "LT6cn", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "fill": "#0F172A", "fontWeight": "600", "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "id": "jl54n", "type": "ref", "ref": "zZ30X", "name": "hero", "padding": 80, "width": "fill_container", "height": "fit_content", "y": 70, "descendants": { "yj5cg": { "width": "fit_content", "height": "fit_content", "x": 666, "y": 80 }, "x1nuT": { "content": "Why No.JS?", "x": 16, "y": 8 }, "3iBsZ": { "content": "Built for Modern Web Development", "textGrowth": "fixed-width", "width": 900, "x": 270, "y": 132 }, "aeLdw": { "content": "Every feature designed to make HTML-first development powerful, fast, and enjoyable.", "textGrowth": "fixed-width", "width": 700, "x": 370, "y": 213 } } }, { "type": "frame", "id": "J88yo", "name": "Reactive State Section", "width": "fill_container", "fill": "#FFFFFF", "gap": 60, "padding": 80, "children": [ { "type": "frame", "id": "ef42g", "name": "Left Content", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [ { "id": "r0hVu", "type": "ref", "ref": "xaxNV", "name": "badge2", "width": "fit_content", "height": "fit_content", "descendants": { "ibm3N": { "content": "Core Feature", "x": 16, "y": 8 } } }, { "type": "text", "id": "SJG4m", "name": "title1", "fill": "#0F172A", "content": "Reactive State Management", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "bold" }, { "type": "text", "id": "L7WN9", "name": "desc1", "fill": "#334155", "textGrowth": "fixed-width", "width": "fill_container", "content": "Declare state directly in HTML with state. Changes automatically propagate to all bound elements — no store setup, no reducers, no boilerplate.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "OC7FA", "name": "Highlights", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "id": "T6JVL", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "descendants": { "t5rMw": { "content": "Automatic dependency tracking", "x": 30 } } }, { "id": "caVfp", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 32, "descendants": { "t5rMw": { "content": "Nested object support", "x": 30 } } }, { "id": "LzosM", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 64, "descendants": { "t5rMw": { "content": "Computed properties", "x": 30 } } }, { "id": "yQfTO", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 96, "descendants": { "t5rMw": { "content": "Cross-component state sharing", "x": 30 } } } ] } ] }, { "type": "frame", "id": "4Fo4R", "name": "rCol1", "width": 500, "layout": "vertical", "gap": 16, "children": [ { "type": "frame", "id": "ZUedj", "name": "prev1", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 8, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 12, "padding": 20, "children": [ { "type": "text", "id": "87OfA", "fill": "#94A3B8", "content": "▶ PREVIEW", "fontFamily": "Space Grotesk", "fontSize": 10, "fontWeight": "600" }, { "type": "frame", "id": "xJvyJ", "name": "innerPrev1", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 16, 0 ], "alignItems": "center", "children": [ { "type": "frame", "id": "p2CSH", "name": "inputMock1", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#CBD5E1" }, "padding": [ 8, 12 ], "children": [ { "type": "text", "id": "oFlmC", "fill": "#334155", "content": "World", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "text", "id": "qDHtG", "fill": "#0F172A", "content": "Hello, World!", "fontFamily": "Space Grotesk", "fontSize": 22, "fontWeight": "bold" } ] } ] }, { "id": "qHFrE", "type": "ref", "ref": "zDasK", "width": 500, "name": "code1", "height": "fit_content", "y": 186, "descendants": { "salq5": { "content": "
", "x": 28, "y": 24 }, "IAMDC": { "content": "

", "fill": "#0EA5E9", "x": 28, "y": 49 }, "qfwvk": { "content": "

\n
", "x": 28, "y": 74 } } } ] } ] }, { "type": "frame", "id": "VNfes", "name": "Declarative Rendering Section", "width": "fill_container", "fill": "#F8FAFC", "gap": 60, "padding": 80, "children": [ { "type": "frame", "id": "GwMCF", "name": "lCol2", "width": 500, "layout": "vertical", "gap": 16, "children": [ { "type": "frame", "id": "NjB4F", "name": "prev2", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 8, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 12, "padding": 20, "children": [ { "type": "text", "id": "UzsUC", "fill": "#94A3B8", "content": "▶ PREVIEW", "fontFamily": "Space Grotesk", "fontSize": 10, "fontWeight": "600" }, { "type": "frame", "id": "3bYbB", "name": "inner2", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": [ 8, 0 ], "children": [ { "type": "frame", "id": "8yL3b", "name": "item1", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "kr5Sz", "width": 8, "height": 8, "fill": "#0EA5E9", "cornerRadius": 100 }, { "type": "text", "id": "Alxdp", "fill": "#0F172A", "content": "Buy groceries", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "sK9hO", "name": "item2", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "ztB5W", "width": 8, "height": 8, "fill": "#0EA5E9", "cornerRadius": 100 }, { "type": "text", "id": "KYH8u", "fill": "#0F172A", "content": "Take out trash", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "MSeFc", "name": "item3", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "QNhpd", "width": 8, "height": 8, "fill": "#E2E8F0", "cornerRadius": 100 }, { "type": "text", "id": "Dpegi", "fill": "#94A3B8", "content": "Fix the bug", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] } ] }, { "id": "nuZ2B", "type": "ref", "ref": "zDasK", "width": 500, "name": "code2", "height": "fit_content", "y": 161, "descendants": { "salq5": { "content": "", "x": 28, "y": 74 } } } ] }, { "type": "frame", "id": "kIJZF", "name": "Right Content", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [ { "id": "3PJOE", "type": "ref", "ref": "xaxNV", "name": "badge3", "width": "fit_content", "height": "fit_content", "descendants": { "ibm3N": { "content": "Rendering", "x": 16, "y": 8 } } }, { "type": "text", "id": "QXy22", "name": "title2", "fill": "#0F172A", "content": "Declarative Rendering", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "bold" }, { "type": "text", "id": "GffTJ", "name": "desc2", "fill": "#334155", "textGrowth": "fixed-width", "width": "fill_container", "content": "Use if, each, show, and bind to control what renders. No JSX, no template literals — just HTML attributes.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "00joN", "name": "Highlights", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "id": "90Oho", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "descendants": { "t5rMw": { "content": "Conditional rendering with if", "x": 30 } } }, { "id": "bE6oP", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 32, "descendants": { "t5rMw": { "content": "List rendering with each", "x": 30 } } }, { "id": "OvPya", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 64, "descendants": { "t5rMw": { "content": "Text interpolation with bind", "x": 30 } } }, { "id": "CyXsb", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 96, "descendants": { "t5rMw": { "content": "Visibility toggle with show", "x": 30 } } } ] } ] } ] }, { "type": "frame", "id": "3VFy3", "name": "Event Handling Section", "width": "fill_container", "fill": "#FFFFFF", "gap": 60, "padding": 80, "children": [ { "type": "frame", "id": "d2rX2", "name": "Left Content", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [ { "id": "6uX4o", "type": "ref", "ref": "xaxNV", "name": "badge4", "width": "fit_content", "height": "fit_content", "descendants": { "ibm3N": { "content": "Interactivity", "x": 16, "y": 8 } } }, { "type": "text", "id": "OOiyz", "name": "title3", "fill": "#0F172A", "content": "Intuitive Event Handling", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "bold" }, { "type": "text", "id": "JxoyH", "name": "desc3", "fill": "#334155", "textGrowth": "fixed-width", "width": "fill_container", "content": "Bind events with on:event syntax. Access state directly in handlers without this or callbacks.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "zEBiT", "name": "Highlights", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "id": "PToWX", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "descendants": { "t5rMw": { "content": "Click, submit, input, and more", "x": 30 } } }, { "id": "qKZBy", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 32, "descendants": { "t5rMw": { "content": "Direct state access in handlers", "x": 30 } } }, { "id": "UJhRN", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 64, "descendants": { "t5rMw": { "content": "Event modifiers support", "x": 30 } } }, { "id": "0NcEe", "type": "ref", "ref": "GYvmw", "name": "highlight", "width": "fill_container", "height": "fit_content", "y": 96, "descendants": { "t5rMw": { "content": "No wrapper functions needed", "x": 30 } } } ] } ] }, { "type": "frame", "id": "mx0H3", "name": "rCol3", "width": 500, "layout": "vertical", "gap": 16, "children": [ { "type": "frame", "id": "CEeyb", "name": "prev3", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 8, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 12, "padding": 20, "alignItems": "center", "children": [ { "type": "text", "id": "QBMG1", "fill": "#94A3B8", "content": "▶ PREVIEW", "fontFamily": "Space Grotesk", "fontSize": 10, "fontWeight": "600" }, { "type": "text", "id": "twWmE", "fill": "#0F172A", "content": "5", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "frame", "id": "kF33M", "name": "btnMock3", "fill": "#0EA5E9", "cornerRadius": 6, "padding": [ 10, 20 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "CuDQw", "fill": "#FFFFFF", "content": "Clicked: 5", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "id": "xBVKE", "type": "ref", "ref": "zDasK", "width": 500, "name": "code3", "height": "fit_content", "y": 191, "descendants": { "salq5": { "content": "
", "x": 28, "y": 24 }, "IAMDC": { "content": " \n
", "x": 28, "y": 74 } } } ] } ] }, { "type": "frame", "id": "M5sdH", "name": "Feature Grid Section", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 40, "padding": 80, "alignItems": "center", "children": [ { "id": "w5gcT", "type": "ref", "ref": "AP166", "name": "secHeader", "width": "fill_container", "height": "fit_content", "x": 80, "y": 80, "descendants": { "5cleo": { "content": "More Features", "width": "fill_container" }, "vYiJ2": { "content": "Everything you need, nothing you don't", "width": "fill_container", "y": 77 } } }, { "type": "frame", "id": "UfqCZ", "name": "Feature Grid", "width": "fill_container", "layout": "vertical", "gap": 24, "children": [ { "type": "frame", "id": "mNKc6", "name": "Row 1", "width": "fill_container", "gap": 24, "children": [ { "id": "9BOtq", "type": "ref", "ref": "5c6m2", "width": "fill_container", "name": "card1", "height": "fit_content", "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "iconFontName": "route", "x": 12, "y": 12 }, "AyW03": { "content": "Client-Side Routing", "x": 32, "y": 96 }, "I73kS": { "content": "Full SPA routing with route and route-view. Hash and history mode, dynamic params, nested routes, and guards.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "88QLx", "type": "ref", "ref": "5c6m2", "width": "fill_container", "name": "card2", "height": "fit_content", "x": 434.6666666666667, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "iconFontName": "file-text", "x": 12, "y": 12 }, "AyW03": { "content": "Form Handling", "x": 32, "y": 96 }, "I73kS": { "content": "Two-way binding with model, built-in validation, error messages, and form submission handling.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "AS2hg", "type": "ref", "ref": "5c6m2", "width": "fill_container", "name": "card3", "height": "fit_content", "x": 869.3333333333334, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "iconFontName": "globe", "x": 12, "y": 12 }, "AyW03": { "content": "Fetch & API", "x": 32, "y": 96 }, "I73kS": { "content": "Declarative data fetching with get and post. Loading states, error handling, and caching built in.", "width": "fill_container", "x": 32, "y": 138 } } } ] }, { "type": "frame", "id": "P8qAR", "name": "Row 2", "width": "fill_container", "gap": 24, "children": [ { "id": "Pdxqr", "type": "ref", "ref": "5c6m2", "width": "fill_container", "name": "card4", "height": "fit_content", "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "iconFontName": "palette", "x": 12, "y": 12 }, "AyW03": { "content": "CSS Bindings", "x": 32, "y": 96 }, "I73kS": { "content": "Dynamic styling with class-* and style-*. Bind CSS classes and inline styles reactively to state.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "xghPP", "type": "ref", "ref": "5c6m2", "width": "fill_container", "name": "card5", "height": "fit_content", "x": 434.6666666666667, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "iconFontName": "refresh-cw", "x": 12, "y": 12 }, "AyW03": { "content": "Lifecycle Hooks", "x": 32, "y": 96 }, "I73kS": { "content": "Hook into mount, update, and destroy phases. Run setup logic and cleanup with fine-grained control.", "width": "fill_container", "x": 32, "y": 138 } } }, { "id": "3yPVi", "type": "ref", "ref": "5c6m2", "width": "fill_container", "name": "card6", "height": "fit_content", "x": 869.3333333333334, "descendants": { "4bqQB": { "x": 32, "y": 32 }, "AOME1": { "iconFontName": "package", "x": 12, "y": 12 }, "AyW03": { "content": "Zero Dependencies", "x": 32, "y": 96 }, "I73kS": { "content": "No build tools, no bundlers, no npm install. Just drop a script tag and start building instantly.", "width": "fill_container", "x": 32, "y": 138 } } } ] } ] } ] }, { "id": "ahgq9", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "width": "fill_container", "height": "fit_content", "y": 2701, "descendants": { "GZpIo": { "content": "Ready to Build?", "x": 582.5, "y": 80 }, "bCVoG": { "content": "Start using No.JS in under 30 seconds.", "x": 553.5, "y": 146 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 628, "y": 188 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "Get Started Now", "x": 24, "y": 12 }, "BlI0n": { "opacity": 0, "height": 0, "width": 0, "x": 184, "y": 21.5 }, "FdLAq": { "x": -41, "y": -9.5 } } }, { "id": "LlUGX", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 3012, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "s4Y82", "x": 6160, "y": 0, "name": "Examples Page", "clip": true, "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "W2NNc", "type": "ref", "ref": "BU3E9", "width": "fill_container", "name": "header", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "fill": "#0F172A", "fontWeight": "600", "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "id": "F5pbT", "type": "ref", "ref": "zZ30X", "name": "hero", "width": "fill_container", "height": "fit_content", "y": 70, "descendants": { "yj5cg": { "width": "fit_content", "height": "fit_content", "x": 648.5, "y": 60 }, "x1nuT": { "content": "Learn by Example", "x": 16, "y": 8 }, "3iBsZ": { "content": "Examples", "x": 610, "y": 112 }, "aeLdw": { "content": "Practical examples to help you build with No.JS", "x": 518, "y": 193 } } }, { "type": "frame", "id": "Jm9NX", "name": "Example 1 - Counter", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "gap": 32, "padding": [ 60, 80 ], "children": [ { "type": "frame", "id": "kL5x5", "name": "Ex1 Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "bjUpf", "name": "ex1Title", "fill": "#0F172A", "content": "Counter", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "id": "fKDGR", "type": "ref", "ref": "xaxNV", "name": "ex1Badge", "width": "fit_content", "height": "fit_content", "x": 1192, "y": 2, "descendants": { "ibm3N": { "content": "Beginner", "x": 16, "y": 8 } } } ] }, { "type": "text", "id": "9GDtz", "name": "ex1Desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "A simple counter demonstrating reactive state and event handling.", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "dYimo", "name": "Ex1 Panels", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "BTiNL", "name": "Code Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": [ 24, 28 ], "children": [ { "type": "text", "id": "ia91J", "name": "codeTab1", "fill": "#94A3B8", "content": "index.html", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "mkI6D", "name": "codeContent1", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "
\n

\n \n
", "lineHeight": 1.8, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "7MVAl", "name": "Preview Panel", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 24, "padding": 32, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "Uxc1d", "name": "previewCount", "fill": "#0F172A", "content": "0", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold" }, { "type": "frame", "id": "0feOq", "name": "+1 Button", "fill": "#0EA5E9", "padding": [ 10, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "pp5cD", "name": "previewBtnText", "fill": "#FFFFFF", "content": "+1", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "600" } ] } ] } ] } ] }, { "type": "frame", "id": "8fAN9", "name": "Example 2 - Todo List", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 32, "padding": [ 60, 80 ], "children": [ { "type": "frame", "id": "9Qq6j", "name": "Ex2 Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "EnpHv", "name": "ex2Title", "fill": "#0F172A", "content": "Todo List", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "id": "GL4vZ", "type": "ref", "ref": "xaxNV", "name": "ex2Badge", "width": "fit_content", "height": "fit_content", "x": 1169, "y": 2, "descendants": { "ibm3N": { "content": "Intermediate", "x": 16, "y": 8 } } } ] }, { "type": "text", "id": "zvUaF", "name": "ex2Desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Build a todo app with form handling, list rendering, and state management.", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "sAsyz", "name": "Ex2 Panels", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "favdG", "name": "Code Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": [ 24, 28 ], "children": [ { "type": "text", "id": "BwFgD", "name": "codeTab2", "fill": "#94A3B8", "content": "index.html", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "TZDex", "name": "codeContent2", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "
\n \n \n \n
", "lineHeight": 1.8, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "9mj2c", "name": "Preview Panel", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 32, "children": [ { "type": "frame", "id": "IOOgo", "name": "Input Row", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "MvFOY", "name": "Input Field", "width": "fill_container", "height": 40, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "4L79r", "name": "inputText", "fill": "#94A3B8", "content": "Buy groceries", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "LUa14", "name": "Add Button", "fill": "#0EA5E9", "padding": [ 10, 20 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "dZeTw", "name": "addBtnText", "fill": "#FFFFFF", "content": "Add", "fontFamily": "Space Grotesk", "fontSize": 14, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "cRafy", "name": "Todo List", "width": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "VTkUd", "name": "Todo Item 1", "width": "fill_container", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "gap": 12, "padding": [ 12, 0 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "yhIdK", "name": "todo1Check", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#0EA5E9" }, { "type": "text", "id": "diLfo", "name": "todo1Text", "fill": "#0F172A", "content": "Learn No.JS", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "vOzxR", "name": "Todo Item 2", "width": "fill_container", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "gap": 12, "padding": [ 12, 0 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "L9QxY", "name": "todo2Check", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#0EA5E9" }, { "type": "text", "id": "bdj6x", "name": "todo2Text", "fill": "#0F172A", "content": "Build an app", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "QatP6", "name": "Todo Item 3", "width": "fill_container", "gap": 12, "padding": [ 12, 0 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "cROI8", "name": "todo3Check", "width": 18, "height": 18, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#E2E8F0" }, { "type": "text", "id": "FZdu4", "name": "todo3Text", "fill": "#0F172A", "content": "Deploy", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] } ] } ] }, { "type": "frame", "id": "DmpeE", "name": "Example 3 - Fetch Data", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "gap": 32, "padding": [ 60, 80 ], "children": [ { "type": "frame", "id": "MOFwg", "name": "Ex3 Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "bUlme", "name": "ex3Title", "fill": "#0F172A", "content": "API Fetch", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "id": "BwexM", "type": "ref", "ref": "xaxNV", "name": "ex3Badge", "width": "fit_content", "height": "fit_content", "x": 1169, "y": 2, "descendants": { "ibm3N": { "content": "Intermediate", "x": 16, "y": 8 } } } ] }, { "type": "text", "id": "bTTnV", "name": "ex3Desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Fetch data from an API and render it reactively.", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "d9FKN", "name": "Ex3 Panels", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "VpJCs", "name": "Code Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": [ 24, 28 ], "children": [ { "type": "text", "id": "Y1deM", "name": "codeTab3", "fill": "#94A3B8", "content": "index.html", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "mbGhJ", "name": "codeContent3", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "
\n
\n \n
\n
", "lineHeight": 1.8, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "xAILu", "name": "Preview Panel", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 12, "padding": 24, "children": [ { "type": "frame", "id": "Trc3p", "name": "User Card 1", "width": "fill_container", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "gap": 16, "padding": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "oYP0x", "name": "avatar1", "fill": "#E2E8F0", "width": 40, "height": 40 }, { "type": "frame", "id": "bSBZF", "name": "userInfo1", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "2bu8G", "name": "userName1", "fill": "#0F172A", "content": "Alice Johnson", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "MDCne", "name": "userEmail1", "fill": "#94A3B8", "content": "alice@example.com", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "KoHhj", "name": "User Card 2", "width": "fill_container", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "gap": 16, "padding": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "tfxTR", "name": "avatar2", "fill": "#E2E8F0", "width": 40, "height": 40 }, { "type": "frame", "id": "O2PnH", "name": "userInfo2", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "tRPbM", "name": "userName2", "fill": "#0F172A", "content": "Bob Smith", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "skIBp", "name": "userEmail2", "fill": "#94A3B8", "content": "bob@example.com", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "YqR96", "name": "User Card 3", "width": "fill_container", "gap": 16, "padding": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "19ORg", "name": "avatar3", "fill": "#E2E8F0", "width": 40, "height": 40 }, { "type": "frame", "id": "PAD0J", "name": "userInfo3", "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "LNF9E", "name": "userName3", "fill": "#0F172A", "content": "Carol Lee", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "500" }, { "type": "text", "id": "UkhG4", "name": "userEmail3", "fill": "#94A3B8", "content": "carol@example.com", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] } ] }, { "type": "frame", "id": "ziJgp", "name": "Example 4 - Routing", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 32, "padding": [ 60, 80 ], "children": [ { "type": "frame", "id": "b9lIK", "name": "Ex4 Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "PNlkw", "name": "ex4Title", "fill": "#0F172A", "content": "Client-Side Routing", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "id": "rqf3Z", "type": "ref", "ref": "xaxNV", "name": "ex4Badge", "width": "fit_content", "height": "fit_content", "x": 1184, "y": 2, "descendants": { "ibm3N": { "content": "Advanced", "x": 16, "y": 8 } } } ] }, { "type": "text", "id": "oUnHX", "name": "ex4Desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Set up client-side routing with route and route-view for single-page applications.", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "NJLCF", "name": "Ex4 Panels", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "DJWTl", "name": "Code Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": [ 24, 28 ], "children": [ { "type": "text", "id": "TNYm3", "name": "codeTab4", "fill": "#94A3B8", "content": "index.html", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "i9N6y", "name": "codeContent4", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "\n
\n \n
", "lineHeight": 1.8, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "lDzW2", "name": "Preview Panel", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "children": [ { "type": "frame", "id": "jcKt8", "name": "Nav Bar", "width": "fill_container", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "gap": 24, "padding": [ 12, 24 ], "alignItems": "center", "children": [ { "type": "text", "id": "xYWXI", "name": "navHome", "fill": "#0EA5E9", "content": "Home", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "FAjgN", "name": "navAbout", "fill": "#64748B", "content": "About", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "SJjuZ", "name": "Route Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 32, "children": [ { "type": "text", "id": "5Ogzb", "name": "routeTitle", "fill": "#0F172A", "content": "Welcome Home", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "bold" }, { "type": "text", "id": "H9Xv4", "name": "routeText", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "This is the home page content rendered by No.JS routing.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] } ] }, { "id": "zKe6i", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "padding": [ 60, 80 ], "width": "fill_container", "height": "fit_content", "y": 2430, "descendants": { "GZpIo": { "content": "Want More Examples?", "x": 528.5, "y": 60 }, "bCVoG": { "content": "Check out the full documentation for advanced patterns.", "x": 479.5, "y": 126 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 522.5, "y": 168 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "View Documentation", "x": 24, "y": 12 }, "BlI0n": { "width": "fit_content", "height": "fit_content", "x": 214 }, "FdLAq": { "content": "GitHub Repository", "x": 24, "y": 12 } } }, { "id": "kE0gt", "type": "ref", "ref": "OIXap", "width": "fill_container", "name": "footer", "height": "fit_content", "y": 2701, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "30Pep", "x": 3080, "y": 0, "name": "Documentation Page", "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "oNwIg", "type": "ref", "ref": "BU3E9", "width": "fill_container", "name": "header", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 542, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "fill": "#0F172A", "fontWeight": "600", "x": 163, "y": 2.5 }, "2dFBe": { "x": 261, "y": 2.5 }, "GphrL": { "x": 321, "y": 2.5 }, "qJFiR": { "x": 429, "y": 2.5 }, "FNzKS": { "x": 496, "y": 0 }, "od4kB": { "x": 550, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 606, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 757, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "id": "Ib0B0", "type": "ref", "ref": "zZ30X", "name": "hero", "width": "fill_container", "height": "fit_content", "y": 70, "descendants": { "yj5cg": { "width": "fit_content", "height": "fit_content", "x": 656.5, "y": 60 }, "x1nuT": { "content": "Getting Started", "x": 16, "y": 8 }, "3iBsZ": { "content": "Documentation", "x": 540.5, "y": 112 }, "aeLdw": { "content": "Everything you need to build reactive HTML-first applications", "textGrowth": "fixed-width", "width": 600, "x": 420, "y": 193 } } }, { "type": "frame", "id": "WSpqX", "name": "Main Content Area", "width": "fill_container", "gap": 48, "padding": [ 40, 80, 60, 80 ], "children": [ { "type": "frame", "id": "meBmM", "name": "Sidebar", "width": 240, "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "q6JjN", "name": "sideHead1", "fill": "#0F172A", "content": "Getting Started", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "bold", "letterSpacing": 0.5 }, { "id": "6uTY9", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 21, "descendants": { "g1NfQ": { "content": "Introduction", "fill": "#0EA5E9", "fontWeight": "500", "x": 12, "y": 8 } } }, { "id": "NUFmc", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 58, "descendants": { "g1NfQ": { "content": "Installation", "x": 12, "y": 8 } } }, { "id": "25IAK", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 95, "descendants": { "g1NfQ": { "content": "Quick Start", "x": 12, "y": 8 } } }, { "id": "NXjRY", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 132, "descendants": { "g1NfQ": { "content": "Core Concepts", "x": 12, "y": 8 } } }, { "type": "frame", "id": "zpyHr", "name": "spacer1", "width": "fill_container", "height": 16 }, { "type": "text", "id": "fsY17", "name": "sideHead2", "fill": "#0F172A", "content": "Guides", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "bold", "letterSpacing": 0.5 }, { "id": "MksCL", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 210, "descendants": { "g1NfQ": { "content": "State Management", "x": 12, "y": 8 } } }, { "id": "rSGod", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 247, "descendants": { "g1NfQ": { "content": "Event Handling", "x": 12, "y": 8 } } }, { "id": "yFdii", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 284, "descendants": { "g1NfQ": { "content": "Routing", "x": 12, "y": 8 } } }, { "id": "gvPs1", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 321, "descendants": { "g1NfQ": { "content": "Forms", "x": 12, "y": 8 } } }, { "id": "aVRXu", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 358, "descendants": { "g1NfQ": { "content": "Fetch & API", "x": 12, "y": 8 } } }, { "type": "frame", "id": "2sFk3", "name": "spacer2", "width": "fill_container", "height": 16 }, { "type": "text", "id": "FeGVS", "name": "sideHead3", "fill": "#0F172A", "content": "API Reference", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "bold", "letterSpacing": 0.5 }, { "id": "QpqBD", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 436, "descendants": { "g1NfQ": { "content": "Directives", "x": 12, "y": 8 } } }, { "id": "7gBW7", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 473, "descendants": { "g1NfQ": { "content": "Components", "x": 12, "y": 8 } } }, { "id": "ILGag", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 510, "descendants": { "g1NfQ": { "content": "Lifecycle", "x": 12, "y": 8 } } }, { "id": "Btams", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 547, "descendants": { "g1NfQ": { "content": "Configuration", "x": 12, "y": 8 } } } ] }, { "type": "frame", "id": "NEMTJ", "name": "Content Area", "width": "fill_container", "layout": "vertical", "gap": 48, "children": [ { "type": "frame", "id": "2SByK", "name": "Introduction Section", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "6jWXR", "name": "introTitle", "fill": "#0F172A", "content": "Introduction", "fontFamily": "Space Grotesk", "fontSize": 32, "fontWeight": "bold" }, { "type": "text", "id": "uNfZw", "name": "introText", "fill": "#334155", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS is an HTML-first reactive framework that lets you build dynamic web applications using just HTML attributes. No build step required, no virtual DOM, no compilation — just drop in a script tag and start building.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "id": "q5sPT", "type": "ref", "ref": "V0G8T", "name": "infoCallout", "width": "fill_container", "height": "fit_content", "y": 127, "descendants": { "ktk59": { "content": "No.JS works directly in the browser with zero dependencies. At ~14KB gzipped, it's one of the lightest reactive frameworks available.", "x": 20, "y": 16 } } } ] }, { "type": "frame", "id": "LA82M", "name": "divider0", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "4AB7m", "name": "Installation Section", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [ { "type": "text", "id": "RvGv1", "name": "installTitle", "fill": "#0F172A", "content": "Installation", "fontFamily": "Space Grotesk", "fontSize": 32, "fontWeight": "bold" }, { "type": "text", "id": "1Yar9", "name": "cdnLabel", "fill": "#0F172A", "content": "Via CDN (Recommended)", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "600" }, { "id": "vbmNA", "type": "ref", "ref": "zDasK", "width": "fill_container", "name": "cdnCode", "height": "fit_content", "y": 107, "descendants": { "salq5": { "content": "", "x": 28, "y": 49 }, "qfwvk": { "enabled": false } } }, { "type": "text", "id": "Yv3GR", "name": "npmLabel", "fill": "#0F172A", "content": "Via npm", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "600" }, { "id": "7exvm", "type": "ref", "ref": "zDasK", "width": "fill_container", "name": "npmCode", "height": "fit_content", "y": 271, "descendants": { "salq5": { "content": "npm install no-js", "x": 28, "y": 24 }, "IAMDC": { "enabled": false }, "qfwvk": { "enabled": false } } } ] }, { "type": "frame", "id": "op3Yy", "name": "divider1", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "Euwuh", "name": "Quick Start Section", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [ { "type": "text", "id": "qDT5T", "name": "quickTitle", "fill": "#0F172A", "content": "Quick Start", "fontFamily": "Space Grotesk", "fontSize": 32, "fontWeight": "bold" }, { "type": "text", "id": "vPYtC", "name": "quickIntro", "fill": "#334155", "content": "Create your first reactive page:", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "id": "owmHr", "type": "ref", "ref": "zDasK", "width": "fill_container", "name": "quickCode", "height": "fit_content", "y": 108, "descendants": { "salq5": { "content": "
", "x": 28, "y": 24 }, "IAMDC": { "content": "

Count:

", "x": 28, "y": 49 }, "qfwvk": { "content": " \n
", "x": 28, "y": 74 } } }, { "type": "text", "id": "IQEyW", "name": "quickOutro", "fill": "#334155", "textGrowth": "fixed-width", "width": "fill_container", "content": "That's it! No JavaScript files needed. The state attribute creates reactive state, bind displays data, and on:click handles events — all directly in your HTML.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", "id": "fvfrj", "name": "divider2", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "0sfam", "name": "Core Concepts Section", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [ { "type": "text", "id": "ESlqa", "name": "coreTitle", "fill": "#0F172A", "content": "Core Concepts", "fontFamily": "Space Grotesk", "fontSize": 32, "fontWeight": "bold" }, { "type": "text", "id": "jAHhB", "name": "coreText", "fill": "#334155", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS is built around a few simple ideas that make it powerful yet easy to learn:", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "NFxxK", "name": "Concepts Grid", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "id": "JoRoa", "type": "ref", "ref": "DZeSd", "name": "conceptCard", "width": "fill_container", "height": "fit_content", "descendants": { "KhIfL": { "content": "Reactive State", "x": 24, "y": 20 }, "Qw1wl": { "content": "Use state to declare reactive data right in your HTML. Changes automatically propagate to all bound elements.", "x": 24, "y": 51 } } }, { "id": "XvGU3", "type": "ref", "ref": "DZeSd", "name": "conceptCard", "width": "fill_container", "height": "fit_content", "y": 109, "descendants": { "KhIfL": { "content": "Declarative Directives", "x": 24, "y": 20 }, "Qw1wl": { "content": "Powerful attributes like bind, if, each, on:click for binding, conditionals, loops, events, and more — no JavaScript files needed.", "x": 24, "y": 51 } } }, { "id": "4DKRM", "type": "ref", "ref": "DZeSd", "name": "conceptCard", "width": "fill_container", "height": "fit_content", "y": 218, "descendants": { "KhIfL": { "content": "Zero Build Step", "x": 24, "y": 20 }, "Qw1wl": { "content": "Drop in via CDN and start building immediately. No bundlers, no compilers, no configuration required.", "x": 24, "y": 51 } } } ] } ] }, { "type": "frame", "id": "dx6td", "name": "Next Steps Section", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "zEQ2l", "name": "nextTitle", "fill": "#0F172A", "content": "Next Steps", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "bold" }, { "type": "text", "id": "rj1ek", "name": "nextText", "fill": "#334155", "content": "Now that you have the basics, explore more features:", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "cj9Ci", "name": "Next Steps Buttons", "width": "fill_container", "gap": 12, "children": [ { "id": "QhLqy", "type": "ref", "ref": "AUQGw", "name": "nextBtn1", "width": "fit_content", "height": "fit_content", "descendants": { "NE58w": { "content": "State Management", "x": 24, "y": 12 } } }, { "id": "TAgPt", "type": "ref", "ref": "E6zHk", "name": "nextBtn2", "width": "fit_content", "height": "fit_content", "x": 199, "descendants": { "R53vr": { "content": "Event Handling", "x": 24, "y": 12 } } }, { "id": "Ckg8l", "type": "ref", "ref": "E6zHk", "name": "nextBtn3", "width": "fit_content", "height": "fit_content", "x": 368, "descendants": { "R53vr": { "content": "View Examples", "x": 24, "y": 12 } } } ] } ] } ] } ] }, { "id": "YQHF1", "type": "ref", "ref": "OIXap", "width": "fill_container", "name": "footer", "height": "fit_content", "y": 2191, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "sGIhu", "x": 1540, "y": 10000, "name": "LP v2 — Before & After", "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "F0mKW", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "9emNl", "name": "Hero", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 24, "padding": [ 100, 80, 80, 80 ], "alignItems": "center", "children": [ { "type": "frame", "id": "rbY7m", "name": "v2_badge", "fill": "#1E293B", "cornerRadius": 100, "padding": [ 8, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "iObn2", "name": "v2_badge_txt", "fill": "#0EA5E9", "content": "The Better Alternative", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600", "letterSpacing": 1 } ] }, { "type": "text", "id": "Gp1kh", "name": "v2_h1", "fill": "#FFFFFF", "content": "Your bundle is 2.3 MB.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "55jWE", "name": "v2_h2", "fill": "#0EA5E9", "content": "Ours is 14 KB.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "QwfmT", "name": "v2_sub", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": 680, "content": "No.JS does in 4 lines of HTML what takes 80 lines of JSX. Here's proof.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" }, { "type": "frame", "id": "aPUmM", "name": "v2_btns", "gap": 16, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "XMhW9", "name": "v2_btn1", "fill": "#0EA5E9", "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "HK979", "name": "v2_btn1t", "fill": "#FFFFFF", "content": "See the Comparison", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "semibold" } ] }, { "type": "frame", "id": "CMW24", "name": "v2_btn2", "stroke": { "thickness": 1, "fill": "#334155" }, "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "vTleN", "name": "v2_btn2t", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "medium" } ] } ] } ] }, { "type": "frame", "id": "nH8CS", "name": "Code Comparison", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 40, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "F3dm1", "name": "v2_comp_lbl", "fill": "#0F172A", "content": "The same app. The real difference.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "text", "id": "Ea6DN", "name": "v2_comp_sub", "fill": "#64748B", "content": "A reactive search box — the most common real-world pattern.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "GN3ty", "name": "Panels", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "iT0Gg", "name": "React Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "oVi8M", "name": "v2_left_top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "sIS9x", "name": "v2_left_label", "fill": "#F87171", "content": "React", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "9mJdH", "name": "v2_left_lines", "fill": "#64748B", "content": "25 lines · react, react-dom, useState, useEffect", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "text", "id": "ckt5z", "name": "v2_left_code", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "import { useState, useEffect } from 'react';\n\nconst Search = () => {\n const [query, setQuery] = useState('');\n const [results, setResults] = useState([]);\n\n useEffect(() => {\n if (!query) return;\n fetch(`/api/search?q=${query}`)\n .then(r => r.json())\n .then(setResults);\n }, [query]);\n\n return (\n
\n setQuery(e.target.value)}\n />\n {results.map(r => (\n
  • {r.name}
    • \n ))}\n
    \n );\n};", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ILjPD", "name": "NoJS Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "4jF0r", "name": "v2_right_top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "dL3Jf", "name": "v2_right_label", "fill": "#0EA5E9", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "DZb9S", "name": "v2_right_lines", "fill": "#64748B", "content": "4 lines · 0 imports", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "text", "id": "JTdOl", "name": "v2_right_code", "fill": "#A5F3FC", "textGrowth": "fixed-width", "width": "fill_container", "content": "
    \n \n
  • \n
    ", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "5ORHs", "name": "v2_right_note", "fill": "#0EA5E9", "content": "✓ Reactive · ✓ Auto-fetches · ✓ No build step", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "medium" } ] } ] } ] }, { "type": "frame", "id": "YFwme", "name": "Not Shipping Strip", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 32, "padding": [ 60, 80 ], "alignItems": "center", "children": [ { "type": "text", "id": "DT8nt", "name": "v2_strip_h", "fill": "#FFFFFF", "content": "What you're not shipping anymore.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 32, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "frame", "id": "bjeCS", "name": "v2_strip_row", "width": "fill_container", "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "4pAsQ", "name": "v2_t1", "fill": "#1E293B", "cornerRadius": 6, "padding": [ 8, 14 ], "children": [ { "type": "text", "id": "Ziel3", "name": "v2_t1t", "fill": "#F87171", "content": "❌ webpack", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "yqalP", "name": "v2_t2", "fill": "#1E293B", "cornerRadius": 6, "padding": [ 8, 14 ], "children": [ { "type": "text", "id": "55VXr", "name": "v2_t2t", "fill": "#F87171", "content": "❌ babel", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "9mYwQ", "name": "v2_t3", "fill": "#1E293B", "cornerRadius": 6, "padding": [ 8, 14 ], "children": [ { "type": "text", "id": "C0WZr", "name": "v2_t3t", "fill": "#F87171", "content": "❌ vite / rollup", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "90DhI", "name": "v2_t4", "fill": "#1E293B", "cornerRadius": 6, "padding": [ 8, 14 ], "children": [ { "type": "text", "id": "12vOU", "name": "v2_t4t", "fill": "#F87171", "content": "❌ node_modules/", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "dK2RR", "name": "v2_t5", "fill": "#1E293B", "cornerRadius": 6, "padding": [ 8, 14 ], "children": [ { "type": "text", "id": "Fj7wH", "name": "v2_t5t", "fill": "#F87171", "content": "❌ tsconfig.json", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "text", "id": "BwIUg", "name": "v2_strip_note", "fill": "#64748B", "content": "Just a <script> tag. That's the whole setup.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] }, { "id": "cZevN", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "width": "fill_container", "height": "fit_content", "y": 1837, "descendants": { "GZpIo": { "content": "Less tool. More product.", "x": 507.5, "y": 80 }, "bCVoG": { "content": "Stop configuring. Start shipping.", "x": 582, "y": 146 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 552.5, "y": 188 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "Get Started — 1 line", "x": 24, "y": 12 }, "BlI0n": { "width": "fit_content", "height": "fit_content", "x": 205 }, "FdLAq": { "x": 24, "y": 12 } } }, { "id": "l7jOG", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 2148, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "FEiU7", "x": 3080, "y": 10000, "name": "LP v3 — 30 Seconds to Ship", "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "HqtQE", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "ZGhMv", "name": "Hero", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "gap": 24, "padding": [ 100, 80, 80, 80 ], "alignItems": "center", "children": [ { "type": "text", "id": "8aVgA", "name": "v3_eyebrow", "fill": "#0EA5E9", "content": "ZERO SETUP", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "700", "letterSpacing": 3 }, { "type": "text", "id": "mrno3", "name": "v3_h1", "fill": "#0F172A", "content": "From blank file to", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 72, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "PSnwy", "name": "v3_h2", "fill": "#0EA5E9", "content": "working app in 30 seconds.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 72, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "HWZZS", "name": "v3_sub", "fill": "#64748B", "textGrowth": "fixed-width", "width": 640, "content": "While React is still installing, you'll have a reactive app already running in the browser.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" }, { "type": "frame", "id": "JuyoR", "name": "v3_btn", "fill": "#0EA5E9", "padding": [ 16, 40 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "tkWMn", "name": "v3_btnt", "fill": "#FFFFFF", "content": "Try it now — no install needed", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "semibold" } ] } ] }, { "type": "frame", "id": "XARXG", "name": "Steps", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 60, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "rroZx", "name": "v3_steps_h", "fill": "#0F172A", "content": "Three steps. No joke.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "frame", "id": "Zf9mT", "name": "Steps Row", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "gWgD0", "name": "v3_s1", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 32, "children": [ { "type": "text", "id": "G2ERn", "name": "v3_s1n", "fill": "#0EA5E9", "content": "01", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold" }, { "type": "text", "id": "s1p4N", "name": "v3_s1t", "fill": "#0F172A", "content": "Paste 1 line", "fontFamily": "Space Grotesk", "fontSize": 22, "fontWeight": "bold" }, { "type": "text", "id": "ZEa8r", "name": "v3_s1c", "fill": "#64748B", "content": "", "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "2b3Cj", "name": "v3_s2", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 32, "children": [ { "type": "text", "id": "OGxKv", "name": "v3_s2n", "fill": "#0EA5E9", "content": "02", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold" }, { "type": "text", "id": "h4GXa", "name": "v3_s2t", "fill": "#0F172A", "content": "Add attributes", "fontFamily": "Space Grotesk", "fontSize": 22, "fontWeight": "bold" }, { "type": "text", "id": "tMeHt", "name": "v3_s2c", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "state, bind, on:click, each, if — directly on any HTML tag.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "dt5Ex", "name": "v3_s3", "width": "fill_container", "fill": "#0EA5E9", "stroke": { "thickness": 1, "fill": "#0284C7" }, "layout": "vertical", "gap": 16, "padding": 32, "children": [ { "type": "text", "id": "vRaWp", "name": "v3_s3n", "fill": "#FFFFFF", "content": "03", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold" }, { "type": "text", "id": "H989f", "name": "v3_s3t", "fill": "#FFFFFF", "content": "Open in browser.", "fontFamily": "Space Grotesk", "fontSize": 22, "fontWeight": "bold" }, { "type": "text", "id": "zUvbf", "name": "v3_s3c", "fill": "rgba(255,255,255,0.8)", "textGrowth": "fixed-width", "width": "fill_container", "content": "No compile. No terminal. No npm. Just open index.html and it's reactive.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "pMEwY", "name": "First App Demo", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 32, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "qaJs8", "name": "v3_demo_h", "fill": "#FFFFFF", "content": "Your first app — copy & paste.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "text", "id": "X4aNm", "name": "v3_demo_sub", "fill": "#94A3B8", "content": "A live counter with persistent storage. Nothing else needed.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "TUVl0", "name": "Code Block", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "children": [ { "type": "frame", "id": "1NheC", "name": "v3_code_topbar", "width": "fill_container", "fill": "#1E293B", "padding": [ 12, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "2fbFg", "name": "v3_code_dots", "fill": "#475569", "content": "● ● ●", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "EJAxu", "name": "v3_code_fname", "fill": "#64748B", "content": "index.html", "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "xHRot", "name": "v3_code_copy", "fill": "#0EA5E9", "content": "Copy", "fontFamily": "Space Grotesk", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "6EYTC", "name": "v3_code_body", "width": "fill_container", "fill": "#0F172A", "padding": 28, "children": [ { "type": "text", "id": "Vnwbb", "name": "v3_code_txt", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "\n\n\n \n\n\n
    \n

    \n \n \n
    \n\n", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "text", "id": "FPqJg", "name": "v3_demo_note", "fill": "#0EA5E9", "content": "That's it. Reactive. Works offline. Extensible.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "medium" } ] }, { "id": "KT5re", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "width": "fill_container", "height": "fit_content", "y": 1888, "descendants": { "GZpIo": { "content": "Ship in 30 seconds.", "x": 550.5, "y": 80 }, "bCVoG": { "content": "The fastest path from idea to working app.", "x": 539, "y": 146 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 550.5, "y": 188 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "Get the script tag →", "x": 24, "y": 12 }, "BlI0n": { "width": "fit_content", "height": "fit_content", "x": 209 }, "FdLAq": { "x": 24, "y": 12 } } }, { "id": "v3SM5", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 2199, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "jCmG5", "x": 4620, "y": 10000, "name": "LP v4 — The Numbers", "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "URcgX", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "q21pk", "name": "Hero", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 20, "padding": [ 100, 80, 80, 80 ], "alignItems": "center", "children": [ { "type": "text", "id": "MGkxt", "name": "v4_eyebrow", "fill": "#0EA5E9", "content": "BENCHMARKS & FACTS", "fontFamily": "Space Grotesk", "fontSize": 12, "fontWeight": "700", "letterSpacing": 3 }, { "type": "text", "id": "hpHtA", "name": "v4_h1", "fill": "#FFFFFF", "content": "Data doesn't lie.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 80, "fontWeight": "bold", "letterSpacing": -3 }, { "type": "text", "id": "bmYNW", "name": "v4_sub", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": 640, "content": "When you strip away the marketing, what you have left is: smaller, faster, simpler.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" } ] }, { "type": "frame", "id": "4bS1g", "name": "Numbers", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 60, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "5Jopl", "name": "v4_nums_h", "fill": "#0F172A", "content": "The metrics that matter.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "frame", "id": "0dPpi", "name": "Big Stats", "width": "fill_container", "children": [ { "type": "frame", "id": "IDGMT", "name": "v4_n1", "width": "fill_container", "stroke": { "thickness": { "right": 1 }, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 8, "padding": [ 40, 0 ], "alignItems": "center", "children": [ { "type": "text", "id": "QoHKm", "name": "v4_n1v", "fill": "#0EA5E9", "content": "14 KB", "fontFamily": "Space Grotesk", "fontSize": 56, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "a3GHd", "name": "v4_n1l", "fill": "#64748B", "content": "gzipped bundle size", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" }, { "type": "text", "id": "JRvCH", "name": "v4_n1s", "fill": "#94A3B8", "content": "React is 45 KB. Vue is 34 KB.", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "qnXuL", "name": "v4_n2", "width": "fill_container", "stroke": { "thickness": { "right": 1 }, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 8, "padding": [ 40, 0 ], "alignItems": "center", "children": [ { "type": "text", "id": "wNR9R", "name": "v4_n2v", "fill": "#0EA5E9", "content": "791", "fontFamily": "Space Grotesk", "fontSize": 56, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "z01V8", "name": "v4_n2l", "fill": "#64748B", "content": "passing tests", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" }, { "type": "text", "id": "jZcEp", "name": "v4_n2s", "fill": "#94A3B8", "content": "100% coverage on core directives.", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "00xkN", "name": "v4_n3", "width": "fill_container", "stroke": { "thickness": { "right": 1 }, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 8, "padding": [ 40, 0 ], "alignItems": "center", "children": [ { "type": "text", "id": "Yxlb9", "name": "v4_n3v", "fill": "#0EA5E9", "content": "0", "fontFamily": "Space Grotesk", "fontSize": 56, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "QUTcw", "name": "v4_n3l", "fill": "#64748B", "content": "runtime dependencies", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" }, { "type": "text", "id": "Sc4av", "name": "v4_n3s", "fill": "#94A3B8", "content": "No supply chain. No surprises.", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Js6YV", "name": "v4_n4", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": [ 40, 0 ], "alignItems": "center", "children": [ { "type": "text", "id": "W2inl", "name": "v4_n4v", "fill": "#0EA5E9", "content": "4×", "fontFamily": "Space Grotesk", "fontSize": 56, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "CD3yy", "name": "v4_n4l", "fill": "#64748B", "content": "less code to write", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" }, { "type": "text", "id": "YjZ74", "name": "v4_n4s", "fill": "#94A3B8", "content": "vs equivalent React app, avg 80 → 18 LOC.", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "6V7Oj", "name": "Comparison Matrix", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 40, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "tBsvM", "name": "v4_mx_h", "fill": "#FFFFFF", "content": "How it stacks up.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "frame", "id": "RLOn9", "name": "Table", "width": "fill_container", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "children": [ { "type": "frame", "id": "Z03vi", "name": "v4_thead", "width": "fill_container", "fill": "#1E293B", "padding": [ 16, 24 ], "children": [ { "type": "frame", "id": "1RsfE", "name": "v4_thead_row", "width": "fill_container", "children": [ { "type": "text", "id": "4k8B7", "name": "v4_th0", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": 280, "content": "Criterion", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "Bysoz", "name": "v4_th1", "fill": "#0EA5E9", "textGrowth": "fixed-width", "width": 200, "content": "No.JS ✓", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "700" }, { "type": "text", "id": "kvZhX", "name": "v4_th2", "fill": "#64748B", "textGrowth": "fixed-width", "width": 200, "content": "React", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "gA9Fx", "name": "v4_th3", "fill": "#64748B", "textGrowth": "fixed-width", "width": 200, "content": "Vue", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "4XUof", "name": "v4_r1", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "padding": [ 16, 24 ], "children": [ { "type": "frame", "id": "OoQVc", "name": "v4_r1c", "width": "fill_container", "alignItems": "center", "children": [ { "type": "text", "id": "gh3hv", "name": "v4_r1c0", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": 280, "content": "Bundle size (min+gzip)", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "zPEDl", "name": "v4_r1c1", "fill": "#34D399", "textGrowth": "fixed-width", "width": 200, "content": "14 KB", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "cLBag", "name": "v4_r1c2", "fill": "#F87171", "textGrowth": "fixed-width", "width": 200, "content": "45 KB", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "cLBjw", "name": "v4_r1c3", "fill": "#F87171", "textGrowth": "fixed-width", "width": 200, "content": "34 KB", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "iHb4Z", "name": "v4_r2", "width": "fill_container", "fill": "#0A1020", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "padding": [ 16, 24 ], "children": [ { "type": "frame", "id": "hdDC8", "name": "v4_r2c", "width": "fill_container", "alignItems": "center", "children": [ { "type": "text", "id": "nlQjp", "name": "v4_r2c0", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": 280, "content": "Build step required", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "W5YwS", "name": "v4_r2c1", "fill": "#34D399", "textGrowth": "fixed-width", "width": 200, "content": "None ✓", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "JrihE", "name": "v4_r2c2", "fill": "#F87171", "textGrowth": "fixed-width", "width": 200, "content": "Required", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "oT5VH", "name": "v4_r2c3", "fill": "#F87171", "textGrowth": "fixed-width", "width": 200, "content": "Required", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Nk4sC", "name": "v4_r3", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "padding": [ 16, 24 ], "children": [ { "type": "frame", "id": "HYXPz", "name": "v4_r3c", "width": "fill_container", "alignItems": "center", "children": [ { "type": "text", "id": "4nCPD", "name": "v4_r3c0", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": 280, "content": "Learn in < 1 hour", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "6oTSZ", "name": "v4_r3c1", "fill": "#34D399", "textGrowth": "fixed-width", "width": 200, "content": "Yes ✓", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "600" }, { "type": "text", "id": "6XoTk", "name": "v4_r3c2", "fill": "#F87171", "textGrowth": "fixed-width", "width": 200, "content": "Days–weeks", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "tvbaC", "name": "v4_r3c3", "fill": "#FBBF24", "textGrowth": "fixed-width", "width": 200, "content": "Days", "fontFamily": "JetBrains Mono", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] } ] }, { "id": "2Tms3", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "width": "fill_container", "height": "fit_content", "y": 1383, "descendants": { "GZpIo": { "content": "The numbers speak for themselves.", "x": 412, "y": 80 }, "bCVoG": { "content": "14 KB. 0 dependencies. Fully reactive. Ready to ship.", "x": 495.5, "y": 146 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 570.5, "y": 188 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "Read the Docs", "x": 24, "y": 12 }, "BlI0n": { "width": "fit_content", "height": "fit_content", "x": 169 }, "FdLAq": { "x": 24, "y": 12 } } }, { "id": "ASRUD", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 1694, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "3QLOt", "x": 6160, "y": 10000, "name": "LP v5 — The Philosophy", "width": 1440, "fill": "#0F172A", "layout": "vertical", "children": [ { "id": "Lj9zU", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "IrhOD", "name": "Hero", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 32, "padding": [ 120, 80, 100, 80 ], "children": [ { "type": "text", "id": "abqjd", "name": "v5_kicker", "fill": "#475569", "content": "A MANIFESTO", "fontFamily": "Space Grotesk", "fontSize": 12, "fontWeight": "700", "letterSpacing": 4 }, { "type": "text", "id": "y5Grq", "name": "v5_h1", "fill": "#FFFFFF", "textGrowth": "fixed-width", "width": 900, "content": "The web was already reactive.", "fontFamily": "Space Grotesk", "fontSize": 80, "fontWeight": "bold", "letterSpacing": -3 }, { "type": "text", "id": "J3fNe", "name": "v5_h2", "fill": "#0EA5E9", "textGrowth": "fixed-width", "width": 800, "content": "We just gave HTML the attributes to prove it.", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "normal", "letterSpacing": -1 }, { "type": "frame", "id": "UrItD", "name": "v5_divider", "width": 120, "height": 3, "fill": "#0EA5E9" } ] }, { "type": "frame", "id": "pvuAR", "name": "Editorial", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "layout": "vertical", "gap": 60, "padding": 80, "children": [ { "type": "text", "id": "Hc6nX", "name": "v5_ed_lbl", "fill": "#475569", "content": "THE PROBLEM WITH MODERN JAVASCRIPT", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "frame", "id": "1hcog", "name": "Columns", "width": "fill_container", "gap": 48, "children": [ { "type": "frame", "id": "NnN7O", "name": "v5_col1", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "RMdQw", "name": "v5_col1_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "Somewhere between \"component thinking\" and \"virtual DOM diffing\", we forgot that the browser already understands HTML. It already knows how to update the DOM. It already handles events.\n\nWe built abstraction upon abstraction until a simple form required three files, a build pipeline, and a framework runtime.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "8Ihid", "name": "v5_col2", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "TUPBI", "name": "v5_col2_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS is the opposite bet. The browser is not the enemy — it's the platform. HTML is not limited — it's underutilized. Attributes are not primitive — they're a DSL waiting to happen.\n\nWe built No.JS on one conviction: if you can express it in HTML, you should.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "FHvj9", "name": "v5_col3", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "zgUMV", "name": "v5_col3_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "The result is a framework you can learn in an afternoon and ship in 30 seconds. Not because we made it simple — but because the browser was already capable. We just got out of the way.\n\nThis is not anti-JavaScript. It's pro-HTML.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "WAP3J", "name": "Principles", "width": "fill_container", "fill": "#0A1020", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "layout": "vertical", "gap": 48, "padding": 80, "children": [ { "type": "text", "id": "5itGS", "name": "v5_pr_lbl", "fill": "#475569", "content": "OUR PRINCIPLES", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "frame", "id": "Z2tam", "name": "v5_pr_row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "vG8qe", "name": "v5_p1", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "tkXgz", "name": "v5_p1n", "fill": "#0EA5E9", "content": "01", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "zlyRE", "name": "v5_p1t", "fill": "#FFFFFF", "content": "The browser is the platform", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "hw2Dr", "name": "v5_p1d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "We don't abstract the browser. We extend HTML to use it fully.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "b3QnS", "name": "v5_p2", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "tASVs", "name": "v5_p2n", "fill": "#0EA5E9", "content": "02", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "s3zGF", "name": "v5_p2t", "fill": "#FFFFFF", "content": "Complexity is the enemy", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "Ekbeu", "name": "v5_p2d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "If a feature requires a build step to exist, it doesn't belong in No.JS.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "6iNr1", "name": "v5_p3", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "aIrMN", "name": "v5_p3n", "fill": "#0EA5E9", "content": "03", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "j9XxG", "name": "v5_p3t", "fill": "#FFFFFF", "content": "HTML-first, forever", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "ISHqq", "name": "v5_p3d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Every directive is an HTML attribute. Your templates are valid HTML that any browser can read.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "TnCI7", "name": "v5_p4", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "nRMSV", "name": "v5_p4n", "fill": "#0EA5E9", "content": "04", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "LY8h3", "name": "v5_p4t", "fill": "#FFFFFF", "content": "Ship on day one", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "bd2PZ", "name": "v5_p4d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "The best framework is the one you can use right now, without asking permission from a terminal.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "5f9mq", "name": "Pull Quote", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "padding": [ 80, 160 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "lhe71", "name": "v5_quote_txt", "fill": "#FFFFFF", "textGrowth": "fixed-width", "width": 900, "content": "\"The best JavaScript\nis the JavaScript you don't write.\"", "lineHeight": 1.3, "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold", "letterSpacing": -2 } ] }, { "id": "rEzUN", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "width": "fill_container", "height": "fit_content", "y": 1810, "descendants": { "GZpIo": { "content": "Agree with the philosophy?", "x": 480, "y": 80 }, "bCVoG": { "content": "Then you're already halfway there. Read the docs and start building.", "x": 429, "y": 146 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 548.5, "y": 188 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "Read the Philosophy", "x": 24, "y": 12 }, "BlI0n": { "width": "fit_content", "height": "fit_content", "x": 213 }, "FdLAq": { "x": 24, "y": 12 } } }, { "id": "ZRuQ4", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 2121, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "BtAix", "x": 7700, "y": 10000, "name": "LP v6 — Build Anything", "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "RTtEf", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "239j8", "name": "Hero", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "gap": 24, "padding": [ 100, 80, 80, 80 ], "alignItems": "center", "children": [ { "type": "frame", "id": "jYkgP", "name": "v6_badge", "fill": "#F0F9FF", "cornerRadius": 100, "stroke": { "thickness": 1, "fill": "#BAE6FD" }, "padding": [ 8, 16 ], "children": [ { "type": "text", "id": "C5NMY", "name": "v6_badge_t", "fill": "#0284C7", "content": "Real apps · Real code · Zero setup", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "text", "id": "fJPs4", "name": "v6_h1", "fill": "#0F172A", "content": "Build anything.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 80, "fontWeight": "bold", "letterSpacing": -3 }, { "type": "text", "id": "6D6NL", "name": "v6_h2", "fill": "#0F172A", "content": "Deploy everywhere.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 80, "fontWeight": "bold", "letterSpacing": -3 }, { "type": "text", "id": "WppDq", "name": "v6_h3", "fill": "#0EA5E9", "content": "Maintain nothing.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 80, "fontWeight": "bold", "letterSpacing": -3 }, { "type": "text", "id": "uHHsX", "name": "v6_sub", "fill": "#64748B", "textGrowth": "fixed-width", "width": 680, "content": "No.JS comes with 6 starter templates for the most common app patterns. Each one is a single HTML file.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "normal" } ] }, { "type": "frame", "id": "JGwPM", "name": "Gallery", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 40, "padding": 80, "children": [ { "type": "text", "id": "O70vk", "name": "v6_gallery_h", "fill": "#0F172A", "content": "Pick your starting point.", "fontFamily": "Space Grotesk", "fontSize": 40, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "frame", "id": "v4HT6", "name": "v6_row1", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "gEshp", "name": "v6_card1", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "fVCcs", "name": "v6_c1_tag", "fill": "#ECFDF5", "cornerRadius": 100, "padding": [ 4, 10 ], "children": [ { "type": "text", "id": "LuJLY", "name": "v6_c1_tagt", "fill": "#059669", "content": "Counter / State", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "text", "id": "8O66Y", "name": "v6_c1_title", "fill": "#0F172A", "content": "Live Counter", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" }, { "type": "text", "id": "C3CXX", "name": "v6_c1_desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "State management + event binding. The canonical hello world for reactive UIs.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "NJ3Uf", "name": "v6_c1_code", "fill": "#0F172A", "cornerRadius": 6, "padding": [ 14, 16 ], "children": [ { "type": "text", "id": "4QR38", "name": "v6_c1_codet", "fill": "#A5F3FC", "content": "
    \n

    \n \n
    ", "lineHeight": 1.6, "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "WKKtg", "name": "v6_card2", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "vkh00", "name": "v6_c2_tag", "fill": "#FFF7ED", "cornerRadius": 100, "padding": [ 4, 10 ], "children": [ { "type": "text", "id": "9tjx2", "name": "v6_c2_tagt", "fill": "#EA580C", "content": "Lists / Loops", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "text", "id": "z1Coz", "name": "v6_c2_title", "fill": "#0F172A", "content": "Todo List", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" }, { "type": "text", "id": "sZkHL", "name": "v6_c2_desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Dynamic lists, conditional rendering, two-way input binding, item deletion.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "ir9xj", "name": "v6_c2_code", "fill": "#0F172A", "cornerRadius": 6, "padding": [ 14, 16 ], "children": [ { "type": "text", "id": "klNMo", "name": "v6_c2_codet", "fill": "#A5F3FC", "content": "
  • ", "lineHeight": 1.6, "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Ytc0M", "name": "v6_card3", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "TFntO", "name": "v6_c3_tag", "fill": "#F0F9FF", "cornerRadius": 100, "padding": [ 4, 10 ], "children": [ { "type": "text", "id": "aybCd", "name": "v6_c3_tagt", "fill": "#0284C7", "content": "API / Fetch", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "text", "id": "ftEAC", "name": "v6_c3_title", "fill": "#0F172A", "content": "API Dashboard", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" }, { "type": "text", "id": "gloFz", "name": "v6_c3_desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Live data from REST APIs with auto-refresh, loading state, and error handling.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "fCjXc", "name": "v6_c3_code", "fill": "#0F172A", "cornerRadius": 6, "padding": [ 14, 16 ], "children": [ { "type": "text", "id": "eRZt9", "name": "v6_c3_codet", "fill": "#A5F3FC", "content": "
    \n

    \n
    ", "lineHeight": 1.6, "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "caqEh", "name": "v6_row2", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "YCi5b", "name": "v6_card4", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "1LhnJ", "name": "v6_c4_tag", "fill": "#FDF4FF", "cornerRadius": 100, "padding": [ 4, 10 ], "children": [ { "type": "text", "id": "xrJDz", "name": "v6_c4_tagt", "fill": "#9333EA", "content": "Routing / SPA", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "text", "id": "GzpdC", "name": "v6_c4_title", "fill": "#0F172A", "content": "Multi-page App", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" }, { "type": "text", "id": "TJht5", "name": "v6_c4_desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Client-side routing with params, nested routes, and guards — no server needed.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "8IcAM", "name": "v6_c4_code", "fill": "#0F172A", "cornerRadius": 6, "padding": [ 14, 16 ], "children": [ { "type": "text", "id": "nAh5q", "name": "v6_c4_codet", "fill": "#A5F3FC", "content": "\nAbout\n
    ...
    ", "lineHeight": 1.6, "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "qgIZY", "name": "v6_card5", "width": "fill_container", "fill": "#FFFFFF", "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "2jIcG", "name": "v6_c5_tag", "fill": "#FFF1F2", "cornerRadius": 100, "padding": [ 4, 10 ], "children": [ { "type": "text", "id": "Gluwy", "name": "v6_c5_tagt", "fill": "#E11D48", "content": "Forms / Validation", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "text", "id": "JvWP8", "name": "v6_c5_title", "fill": "#0F172A", "content": "Contact Form", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" }, { "type": "text", "id": "Ipt0s", "name": "v6_c5_desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Two-way binding, built-in validators, error messages, submit handler — all declarative.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "2KANB", "name": "v6_c5_code", "fill": "#0F172A", "cornerRadius": 6, "padding": [ 14, 16 ], "children": [ { "type": "text", "id": "zULBk", "name": "v6_c5_codet", "fill": "#A5F3FC", "content": "", "lineHeight": 1.6, "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "cj7aw", "name": "v6_card6", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#0EA5E9" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "29kaE", "name": "v6_c6_tag", "fill": "#0C4A6E", "cornerRadius": 100, "padding": [ 4, 10 ], "children": [ { "type": "text", "id": "pmiMM", "name": "v6_c6_tagt", "fill": "#7DD3FC", "content": "Search / Filter", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "text", "id": "mfbF6", "name": "v6_c6_title", "fill": "#FFFFFF", "content": "Live Search UI", "fontFamily": "Space Grotesk", "fontSize": 20, "fontWeight": "bold" }, { "type": "text", "id": "QLDkm", "name": "v6_c6_desc", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "Reactive search with API fetch, debounce, filter, and empty-state — in pure HTML.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "oGXjn", "name": "v6_c6_code", "fill": "#0A1525", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#1E3A5F" }, "padding": [ 14, 16 ], "children": [ { "type": "text", "id": "CorNa", "name": "v6_c6_codet", "fill": "#A5F3FC", "content": "\n
  • ", "lineHeight": 1.6, "fontFamily": "JetBrains Mono", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "id": "xnUKw", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "width": "fill_container", "height": "fit_content", "y": 1597, "descendants": { "GZpIo": { "content": "Ready to build your app?", "x": 500.5, "y": 80 }, "bCVoG": { "content": "Pick a template, open index.html, and you're live in 30 seconds.", "x": 449.5, "y": 146 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 547, "y": 188 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "Browse All Templates", "x": 24, "y": 12 }, "BlI0n": { "width": "fit_content", "height": "fit_content", "x": 216 }, "FdLAq": { "x": 24, "y": 12 } } }, { "id": "aTRtA", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 1908, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "bAp6a", "x": 1540, "y": 0, "name": "Landing Page", "width": 1440, "layout": "vertical", "children": [ { "id": "nJyQq", "type": "ref", "ref": "BU3E9", "width": "fill_container", "name": "hdr7", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "9J5Nc", "name": "code7", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 40, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "rwvbv", "name": "v2_comp_lbl", "fill": "#0F172A", "content": "The same app.\nThe real difference.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 80, "fontWeight": "bold", "letterSpacing": -1 }, { "type": "text", "id": "q1CU6", "name": "v2_comp_sub", "fill": "#64748B", "content": "A reactive search box — the most common real-world pattern.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "oWKMK", "name": "Panels", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "SLuwj", "name": "React Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "uHAlL", "name": "v2_left_top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "TnRKf", "name": "v2_left_label", "fill": "#F87171", "content": "React", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "Cf1iH", "name": "v2_left_lines", "fill": "#64748B", "content": "25 lines · react, react-dom, useState, useEffect", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "27Add", "name": "ReactCodeRow", "width": "fill_container", "gap": 12, "children": [ { "type": "text", "id": "WcYd7", "name": "reactLineNums", "opacity": 0.45, "fill": "#475569", "content": " 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "mOmR7", "name": "v2_left_code", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "import { useState, useEffect } from 'react';\n\nconst Search = () => {\n const [query, setQuery] = useState('');\n const [results, setResults] = useState([]);\n\n useEffect(() => {\n if (!query) return;\n fetch(`/api/search?q=${query}`)\n .then(r => r.json())\n .then(setResults);\n }, [query]);\n\n return (\n
    \n setQuery(e.target.value)}\n />\n {results.map(r => (\n
  • {r.name}
    • \n ))}\n
    \n );\n};", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Qhq0v", "name": "NoJS Panel", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "wHHfn", "name": "v2_right_top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "oKd6M", "name": "v2_right_label", "fill": "#0EA5E9", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "VT34o", "name": "v2_right_lines", "fill": "#64748B", "content": "4 lines · 0 imports", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "9rmLU", "name": "NojsCodeRow", "width": "fill_container", "gap": 12, "children": [ { "type": "text", "id": "ISXtt", "name": "nojsLineNums", "opacity": 0.45, "fill": "#475569", "content": "1\n2\n3\n4\n5", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "4Y6Au", "name": "v2_right_code", "fill": "#A5F3FC", "textGrowth": "fixed-width", "width": "fill_container", "content": "
    \n \n
  • \n
    ", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "text", "id": "YI4U8", "name": "v2_right_note", "fill": "#0EA5E9", "content": "✓ Reactive · ✓ Auto-fetches · ✓ No build step", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "medium" } ] } ] } ] }, { "type": "frame", "id": "4NwgK", "name": "newBs", "width": "fill_container", "fill": "#ffffff", "layout": "vertical", "gap": 24, "padding": [ 100, 80, 80, 80 ], "alignItems": "center", "children": [ { "type": "frame", "id": "4a2Ws", "name": "v6_badge", "fill": "#F0F9FF", "cornerRadius": 100, "stroke": { "thickness": 1, "fill": "#BAE6FD" }, "padding": [ 8, 16 ], "children": [ { "type": "text", "id": "lQ5n7", "name": "v6_badge_t", "fill": "#0284C7", "content": "The outcome.", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "text", "id": "G56jx", "name": "v2_h1", "fill": "#0f172a", "content": "Your bundle is 2.3 MB.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "TjfMa", "name": "v2_h2", "fill": "#0EA5E9", "content": "Ours is 14 KB.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "0Kx6M", "name": "v2_sub", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": 520, "content": "No build step. No bundler. No excuses.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" }, { "type": "frame", "id": "9UED1", "name": "v2_btns", "gap": 16, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "vkYgR", "name": "v2_btn1", "fill": "#0EA5E9", "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "4doGw", "name": "v2_btn1t", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "semibold" } ] }, { "type": "frame", "id": "apTyT", "name": "v2_btn2", "fill": "#0f172a", "stroke": { "thickness": 1 }, "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "b4Psw", "name": "v2_btn2t", "fill": "#FFFFFF", "content": "Read the Docs", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "medium" } ] } ] } ] }, { "type": "frame", "id": "akPS5", "name": "hero7", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 32, "padding": [ 120, 80, 100, 80 ], "children": [ { "type": "text", "id": "dw68z", "name": "v5_kicker", "fill": "#475569", "content": "A MANIFESTO", "fontFamily": "Space Grotesk", "fontSize": 12, "fontWeight": "700", "letterSpacing": 4 }, { "type": "text", "id": "zlyAp", "name": "v5_h1", "fill": "#FFFFFF", "textGrowth": "fixed-width", "width": 900, "content": "The web was already reactive.", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -3 }, { "type": "text", "id": "Bw08M", "name": "v5_h2", "fill": "#0EA5E9", "textGrowth": "fixed-width", "width": 800, "content": "We just gave HTML the attributes to prove it.", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "normal", "letterSpacing": -1 }, { "type": "frame", "id": "KNDi9", "name": "v5_divider", "width": 120, "height": 3, "fill": "#0EA5E9" } ] }, { "type": "frame", "id": "sA4GU", "name": "prob7", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "layout": "vertical", "gap": 60, "padding": 80, "children": [ { "type": "text", "id": "pqO9p", "name": "v5_ed_lbl", "fill": "#475569", "content": "THE PROBLEM WITH MODERN JAVASCRIPT", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "frame", "id": "se9BF", "name": "Columns", "width": "fill_container", "gap": 48, "children": [ { "type": "frame", "id": "dcT0W", "name": "v5_col1", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "ZKBRW", "name": "v5_col1_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "Somewhere between \"component thinking\" and \"virtual DOM diffing\", we forgot that the browser already understands HTML. It already knows how to update the DOM. It already handles events.\n\nWe built abstraction upon abstraction until a simple form required three files, a build pipeline, and a framework runtime.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "bkh82", "name": "v5_col2", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "O3s0D", "name": "v5_col2_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS is the opposite bet. The browser is not the enemy — it's the platform. HTML is not limited — it's underutilized. Attributes are not primitive — they're a DSL waiting to happen.\n\nWe built No.JS on one conviction: if you can express it in HTML, you should.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "X4bqf", "name": "v5_col3", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "pAVeb", "name": "v5_col3_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "The result is a framework you can learn in an afternoon and ship in 30 seconds. Not because we made it simple — but because the browser was already capable. We just got out of the way.\n\nThis is not anti-JavaScript. It's pro-HTML.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "3CQE8", "name": "prins7", "width": "fill_container", "fill": "#0A1020", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "layout": "vertical", "gap": 48, "padding": 80, "children": [ { "type": "text", "id": "Kuhf8", "name": "v5_pr_lbl", "fill": "#475569", "content": "OUR PRINCIPLES", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "frame", "id": "A5J8u", "name": "v5_pr_row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "9Eruq", "name": "v5_p1", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "c6oFG", "name": "v5_p1n", "fill": "#0EA5E9", "content": "01", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "eDv7D", "name": "v5_p1t", "fill": "#FFFFFF", "content": "The browser is the platform", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "LcKf8", "name": "v5_p1d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "We don't abstract the browser. We extend HTML to use it fully.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "EfEaN", "name": "v5_p2", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "HBKsO", "name": "v5_p2n", "fill": "#0EA5E9", "content": "02", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "cGSOf", "name": "v5_p2t", "fill": "#FFFFFF", "content": "Complexity is the enemy", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "lnL2B", "name": "v5_p2d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "If a feature requires a build step to exist, it doesn't belong in No.JS.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "47e0i", "name": "v5_p3", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "l2q48", "name": "v5_p3n", "fill": "#0EA5E9", "content": "03", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "xyHY0", "name": "v5_p3t", "fill": "#FFFFFF", "content": "HTML-first, forever", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "ZR9dh", "name": "v5_p3d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Every directive is an HTML attribute. Your templates are valid HTML that any browser can read.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "0Vq63", "name": "v5_p4", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "jEFNO", "name": "v5_p4n", "fill": "#0EA5E9", "content": "04", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "4sp2Z", "name": "v5_p4t", "fill": "#FFFFFF", "content": "Ship on day one", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "12wTi", "name": "v5_p4d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "The best framework is the one you can use right now, without asking permission from a terminal.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "NXmpQ", "name": "quote7", "width": "fill_container", "fill": "#F8FAFC", "stroke": { "thickness": 0 }, "padding": [ 80, 160 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "dvj4a", "name": "v5_quote_txt", "fill": "#0ea5e9", "textGrowth": "fixed-width", "width": 900, "content": "\"The best JavaScript\nis the JavaScript you don't write.\"", "lineHeight": 1.3, "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold", "letterSpacing": -2 } ] }, { "id": "anXeW", "type": "ref", "ref": "CaSRr", "width": "fill_container", "name": "cta7", "fill": "#0F172A", "height": "fit_content", "y": 3335, "descendants": { "GZpIo": { "fill": "#FFFFFF", "x": 582.5, "y": 80 }, "bCVoG": { "fill": "#94A3B8", "x": 617, "y": 146 }, "G35UI": { "x": 580.5, "y": 188, "width": "fit_content", "height": "fit_content" }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "x": 24, "y": 12 }, "BlI0n": { "stroke": { "thickness": 1, "fill": "#334155" }, "fill": [], "width": "fit_content", "height": "fit_content", "x": 149 }, "FdLAq": { "fill": "#FFFFFF", "x": 24, "y": 12 } } }, { "id": "hrOqf", "type": "ref", "ref": "OIXap", "width": "fill_container", "name": "ftr7", "height": "fit_content", "y": 3646, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "6TzbN", "x": 7700, "y": 0, "name": "Playground Page — Kanban Board", "clip": true, "width": 1440, "height": 900, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "H4gTP", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "fill": "#64748B", "y": 2.5 }, "10WVH": { "fill": "#64748B", "x": 72, "y": 2.5 }, "dZ5Q4": { "fill": "#64748B", "x": 163, "y": 2.5 }, "2dFBe": { "fill": "#64748B", "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "rmyF3", "name": "Toolbar", "width": "fill_container", "height": 48, "fill": "#F8FAFC", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "gap": 12, "padding": [ 0, 16, 0, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "9OECx", "name": "tbLeft", "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "v2dCJ", "name": "btnReset", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "gap": 6, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "Ba2xG", "width": 14, "height": 14, "iconFontName": "rotate-ccw", "iconFontFamily": "lucide", "fill": "#64748B" }, { "type": "text", "id": "xm96T", "fill": "#64748B", "content": "Reset", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "UlBLj", "name": "tbRight", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "9nYRv", "name": "btnShare", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "gap": 6, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "yJ1b4", "width": 14, "height": 14, "iconFontName": "share-2", "iconFontFamily": "lucide", "fill": "#64748B" }, { "type": "text", "id": "YOqbV", "fill": "#64748B", "content": "Share", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "I8pNK", "name": "btnDownload", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "gap": 6, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "3g1df", "width": 14, "height": 14, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#64748B" }, { "type": "text", "id": "qAbxS", "fill": "#64748B", "content": "Download", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] } ] }, { "type": "frame", "id": "kUrNM", "name": "MainArea", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "3dNxR", "name": "codeEditorPanel", "width": "fill_container", "height": "fill_container", "fill": "#0F172A", "layout": "vertical", "children": [ { "type": "frame", "id": "XhRdS", "name": "editorTabBar", "width": "fill_container", "height": 36, "fill": "#1E293B", "children": [ { "type": "frame", "id": "TuWPO", "name": "tab-active", "height": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#334155" }, "layout": "vertical", "justifyContent": "space_between", "children": [ { "type": "frame", "id": "oyhUb", "name": "tabContent", "height": "fill_container", "gap": 8, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "GjYzh", "width": 14, "height": 14, "iconFontName": "file-code", "iconFontFamily": "lucide", "fill": "#0EA5E9" }, { "type": "text", "id": "k0Iux", "fill": "#E2E8F0", "content": "kanban.html", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "5TeYi", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#64748B" } ] }, { "type": "frame", "id": "G46Yd", "name": "accentLine", "width": "fill_container", "height": 2, "fill": "#0EA5E9" } ] }, { "type": "frame", "id": "wXdgI", "name": "tab-add-btn", "width": 36, "height": "fill_container", "fill": "#1E293B", "stroke": { "thickness": 1, "fill": "#334155" }, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "9AAbG", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#94A3B8" } ] }, { "type": "frame", "id": "Y5acq", "name": "tabBarSpacer", "width": "fill_container", "height": "fill_container", "fill": "#1E293B" } ] }, { "type": "frame", "id": "nOeGH", "name": "codeArea", "width": "fill_container", "height": "fill_container", "padding": [ 16, 0 ], "children": [ { "type": "frame", "id": "KZLPV", "name": "lineNumbers", "width": 40, "height": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 0, 8 ], "children": [ { "type": "text", "id": "Qlv3Y", "fill": "#475569", "content": " 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12", "lineHeight": 1.6, "textAlign": "right", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "PWMuL", "name": "codeLines", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 0, 12 ], "children": [ { "type": "frame", "id": "wcaC7", "name": "line1", "children": [ { "type": "text", "id": "iO8Ok", "fill": "#94A3B8", "content": "<", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "rmGkv", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "EgRgw", "fill": "#FDE68A", "content": " state", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "yxsPc", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "YfbT3", "fill": "#A5F3FC", "content": "\"{columns:[], nextId:7}\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Hz8ax", "name": "line3", "children": [ { "type": "text", "id": "4iaIL", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "A7NYK", "fill": "#FDE68A", "content": "get", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "DgMBR", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "OMSjM", "fill": "#A5F3FC", "content": "\"kanban.json\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "gYvzY", "fill": "#FDE68A", "content": " as", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "w29zS", "name": "a", "fill": "#A5F3FC", "content": "=\"d\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "9aIqU", "name": "line4", "children": [ { "type": "text", "id": "35WiI", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "bRf0V", "fill": "#FDE68A", "content": "then", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "jnxgo", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "dnjiC", "fill": "#A5F3FC", "content": "\"columns=d.columns\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "glylo", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "eQwr3", "name": "line7", "children": [ { "type": "text", "id": "RczN8", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Bh7X4", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "CSkUD", "fill": "#FDE68A", "content": " class", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "NOAq7", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "6CvDe", "fill": "#A5F3FC", "content": "\"board\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "MGSJo", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "avDPh", "name": "line8", "children": [ { "type": "text", "id": "HAygH", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "7g5Ba", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "bBh1H", "fill": "#FDE68A", "content": " each", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "C1L08", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "qUSZ0", "fill": "#A5F3FC", "content": "\"col in columns\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "s4z35", "fill": "#FDE68A", "content": " class", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "EPCak", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Wa0MD", "fill": "#A5F3FC", "content": "\"column\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "RElMb", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "YJruI", "name": "line9", "children": [ { "type": "text", "id": "XPOYf", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "vNyYY", "fill": "#7DD3FC", "content": "h2", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "6CV3p", "fill": "#FDE68A", "content": " bind", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "lDAly", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "XQCv7", "fill": "#A5F3FC", "content": "\"col.title\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "DrtOm", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "g7dqW", "name": "line10", "children": [ { "type": "text", "id": "gplnp", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "R9Cx0", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "zrnoC", "fill": "#FDE68A", "content": " each", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "9ssnz", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "vluYr", "fill": "#A5F3FC", "content": "\"card in col.cards\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "9qs2M", "fill": "#FDE68A", "content": " class", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "02g92", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "CdSgk", "fill": "#A5F3FC", "content": "\"card\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "OGl1l", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "FMxWJ", "name": "line11", "children": [ { "type": "text", "id": "7pkoh", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "74iJk", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "R6upV", "fill": "#FDE68A", "content": " bind", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "vE6tj", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "AmAMk", "fill": "#A5F3FC", "content": "\"card.title\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "eoudO", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "77CYc", "name": "line12", "children": [ { "type": "text", "id": "d2r4K", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "V8cQg", "name": "line10", "children": [ { "type": "text", "id": "mpdIY", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "piL7x", "name": "line11", "children": [ { "type": "text", "id": "6C7aw", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "YKhtZ", "name": "line12", "children": [ { "type": "text", "id": "r0al7", "fill": "#94A3B8", "content": "", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "AoCEB", "name": "splitter", "width": 4, "height": "fill_container", "fill": "#334155" }, { "type": "frame", "id": "hGKhS", "name": "rightPanel", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "aKqhl", "name": "previewTabBar", "width": "fill_container", "height": 36, "fill": "#F8FAFC", "gap": 8, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "76M6S", "width": 14, "height": 14, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "#3B82F6" }, { "type": "text", "id": "ETz7s", "fill": "#1E293B", "content": "Preview", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "frame", "id": "hfCsh", "width": "fill_container", "height": "fit_content(0)" }, { "type": "icon_font", "id": "O7OqW", "name": "dl1", "width": 14, "height": 14, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#94A3B8" }, { "type": "icon_font", "id": "sRkFm", "width": 14, "height": 14, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "#94A3B8" } ] }, { "type": "frame", "id": "DT1CG", "name": "previewArea", "clip": true, "width": "fill_container", "height": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "children": [ { "type": "frame", "id": "tm1L3", "name": "boardHeader", "width": "fill_container", "height": 44, "fill": "#FFFFFF", "padding": [ 0, 20 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "3lza4", "fill": "#0F172A", "content": "📋 Project Board", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "bold" }, { "type": "text", "id": "S0nlc", "fill": "#64748B", "content": "Total: 6 tasks", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "frame", "id": "ZWaie", "name": "addColumnBtn", "opacity": 70, "cornerRadius": 6, "gap": 4, "padding": [ 4, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "Ka3YH", "name": "plus", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "fR4pr", "name": "label", "fill": "#94A3B8", "content": "New column", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Z32sm", "name": "board", "width": "fill_container", "height": "fill_container", "gap": 10, "padding": [ 12, 16 ], "children": [ { "type": "frame", "id": "MbGdQ", "name": "colTodo", "width": "fill_container", "fill": "#EFF6FF", "cornerRadius": 10, "layout": "vertical", "children": [ { "type": "frame", "id": "oohEF", "name": "colHeader", "width": "fill_container", "padding": [ 10, 12, 6, 12 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "WC82o", "name": "col1title", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "0scyn", "fill": "#334155", "content": "📋 To Do", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "frame", "id": "G4hzm", "fill": "rgba(0,0,0,0.08)", "cornerRadius": 10, "padding": [ 2, 8 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "zneg6", "fill": "#64748B", "content": "3", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "49wLi", "name": "colBody", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": [ 0, 6, 6, 6 ], "children": [ { "type": "frame", "id": "XnTkR", "name": "card1", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 8, "layout": "vertical", "gap": 6, "padding": 10, "children": [ { "type": "text", "id": "lXyn0", "fill": "#1E293B", "content": "Design landing page", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "frame", "id": "LSJSH", "name": "card1tags", "gap": 4, "children": [ { "type": "frame", "id": "BMppG", "fill": "#0EA5E915", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "8bfNy", "fill": "#0284C7", "content": "feat", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] }, { "type": "frame", "id": "0bPk2", "fill": "#F9731615", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "ZPR5n", "fill": "#EA580C", "content": "high", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "q1DVT", "name": "card1ft", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "GLEQa", "fill": "#94A3B8", "content": "2025-03-01", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" }, { "type": "text", "id": "fHCe7", "fill": "#94A3B8", "content": "✕", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "gJSck", "name": "card2", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 8, "layout": "vertical", "gap": 6, "padding": 10, "children": [ { "type": "text", "id": "gprJR", "fill": "#1E293B", "content": "Write API documentation", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "frame", "id": "5Dndo", "name": "card2tags", "gap": 4, "children": [ { "type": "frame", "id": "RHa0Z", "fill": "#A855F715", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "RNa80", "fill": "#9333EA", "content": "docs", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "YFprK", "name": "card2ft", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "jgSTu", "fill": "#94A3B8", "content": "2025-03-02", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" }, { "type": "text", "id": "qRZAP", "fill": "#94A3B8", "content": "✕", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "2YNQg", "name": "card3", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 8, "layout": "vertical", "gap": 6, "padding": 10, "children": [ { "type": "text", "id": "Y9yL4", "fill": "#1E293B", "content": "Fix login redirect bug", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "frame", "id": "ehoNx", "name": "card3tags", "gap": 4, "children": [ { "type": "frame", "id": "tNJ28", "fill": "#EF444415", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "8z5QB", "fill": "#DC2626", "content": "bug", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] }, { "type": "frame", "id": "BPJgm", "fill": "#F9731615", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "km441", "fill": "#EA580C", "content": "high", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "CmAZA", "name": "card3ft", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "D2hn4", "fill": "#94A3B8", "content": "2025-03-01", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" }, { "type": "text", "id": "hBWM1", "fill": "#94A3B8", "content": "✕", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "CnBJL", "name": "addBtn", "width": "fill_container", "padding": [ 0, 6, 6, 6 ], "children": [ { "type": "frame", "id": "AmLpG", "width": "fill_container", "cornerRadius": 8, "padding": 6, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "5QNya", "fill": "#94A3B8", "content": "+ Add card", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "ZkXAZ", "name": "colProgress", "width": "fill_container", "fill": "#EFF6FF", "cornerRadius": 10, "layout": "vertical", "children": [ { "type": "frame", "id": "ksgYH", "name": "colHeader", "width": "fill_container", "padding": [ 10, 12, 6, 12 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "LTP6q", "name": "col2title", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "12N0F", "fill": "#334155", "content": "🔨 In Progress", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "frame", "id": "SJXwK", "fill": "rgba(0,0,0,0.08)", "cornerRadius": 10, "padding": [ 2, 8 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "7cBHA", "fill": "#64748B", "content": "2", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "kRhd8", "name": "colBody", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": [ 0, 6, 6, 6 ], "children": [ { "type": "frame", "id": "eeRAC", "name": "c4", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 8, "layout": "vertical", "gap": 6, "padding": 10, "children": [ { "type": "text", "id": "5PSlL", "fill": "#1E293B", "content": "Implement auth system", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "frame", "id": "XqDiJ", "name": "c4t", "gap": 4, "children": [ { "type": "frame", "id": "FiAB7", "fill": "#0EA5E915", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "FZvCg", "fill": "#0284C7", "content": "feat", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] }, { "type": "frame", "id": "tbBB4", "fill": "#F9731615", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "X5P2K", "fill": "#EA580C", "content": "high", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "X1fvo", "name": "c4f", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "kW7S5", "fill": "#94A3B8", "content": "2025-02-28", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" }, { "type": "text", "id": "9vUi1", "fill": "#94A3B8", "content": "✕", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "smDT1", "name": "c5", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 8, "layout": "vertical", "gap": 6, "padding": 10, "children": [ { "type": "text", "id": "2yyFy", "fill": "#1E293B", "content": "Setup CI/CD pipeline", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "frame", "id": "E3RzJ", "name": "c5t", "gap": 4, "children": [ { "type": "frame", "id": "oAgTZ", "fill": "#0EA5E915", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "Lh2Me", "fill": "#0284C7", "content": "feat", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "m9Yu0", "name": "c5f", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "YUzwP", "fill": "#94A3B8", "content": "2025-02-27", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" }, { "type": "text", "id": "ZhZe9", "fill": "#94A3B8", "content": "✕", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "P0iS5", "name": "addBtn2", "width": "fill_container", "padding": [ 0, 6, 6, 6 ], "children": [ { "type": "frame", "id": "jiwts", "width": "fill_container", "cornerRadius": 8, "padding": 6, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "uZKYL", "fill": "#94A3B8", "content": "+ Add card", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "U8AK0", "name": "colDone", "width": "fill_container", "fill": "#EFF6FF", "cornerRadius": 10, "layout": "vertical", "children": [ { "type": "frame", "id": "8x0aX", "name": "colHeader", "width": "fill_container", "padding": [ 10, 12, 6, 12 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "kLiIs", "name": "col3title", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "nUhd7", "fill": "#334155", "content": "✅ Done", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "frame", "id": "HP3Ln", "fill": "rgba(0,0,0,0.08)", "cornerRadius": 10, "padding": [ 2, 8 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "7fb21", "fill": "#64748B", "content": "1", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "0eMOD", "name": "colBody", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": [ 0, 6, 6, 6 ], "children": [ { "type": "frame", "id": "FBpfi", "name": "c6", "width": "fill_container", "fill": "#FFFFFF", "cornerRadius": 8, "layout": "vertical", "gap": 6, "padding": 10, "children": [ { "type": "text", "id": "vRNJM", "fill": "#1E293B", "content": "Database schema design", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "frame", "id": "HLT2M", "name": "c6t", "gap": 4, "children": [ { "type": "frame", "id": "T7Zfq", "fill": "#0EA5E915", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "AfChS", "fill": "#0284C7", "content": "feat", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] }, { "type": "frame", "id": "bvPqo", "fill": "#A855F715", "cornerRadius": 4, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "AwlsW", "fill": "#9333EA", "content": "docs", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "gtGoW", "name": "c6f", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "7hhem", "fill": "#94A3B8", "content": "2025-02-25", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" }, { "type": "text", "id": "taUKi", "fill": "#94A3B8", "content": "✕", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "UGu8y", "name": "addBtn3", "width": "fill_container", "padding": [ 0, 6, 6, 6 ], "children": [ { "type": "frame", "id": "QvO2G", "width": "fill_container", "cornerRadius": 8, "padding": 6, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "xO0Mh", "fill": "#94A3B8", "content": "+ Add card", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] } ] } ] } ] }, { "type": "frame", "id": "hsSKy", "name": "consoleSplitter", "width": "fill_container", "height": 4, "fill": "#E2E8F0" }, { "type": "frame", "id": "MWT49", "name": "consolePanel", "width": "fill_container", "height": 160, "fill": "#0F172A", "layout": "vertical", "children": [ { "type": "frame", "id": "pd35R", "name": "consoleTabBar", "width": "fill_container", "height": 32, "fill": "#1E293B", "gap": 8, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "zr4Km", "width": 14, "height": 14, "iconFontName": "terminal", "iconFontFamily": "lucide", "fill": "#22C55E" }, { "type": "text", "id": "41qGx", "fill": "#E2E8F0", "content": "Console", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "frame", "id": "ek5dO", "width": "fill_container", "height": "fit_content(0)" }, { "type": "icon_font", "id": "v6wWb", "width": 13, "height": 13, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#64748B" } ] }, { "type": "frame", "id": "ux3ev", "name": "consoleBody", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 8, 12 ], "children": [ { "type": "frame", "id": "0mEB8", "name": "log1", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "sAJ2L", "fill": "#22C55E", "content": "›", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "Pgg91", "fill": "#94A3B8", "content": "[No.JS] initialized — v1.2.1", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "fgosP", "name": "log2", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "IbwVh", "fill": "#22C55E", "content": "›", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "A15f5", "fill": "#94A3B8", "content": "[No.JS] fetch: /data/posts.json — 200 OK", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "TMmLB", "name": "log3", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "U5a2p", "fill": "#60A5FA", "content": "›", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "fkm28", "fill": "#94A3B8", "content": "[No.JS] rendered Blog — 6 posts, 4 categories", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "PLWSD", "name": "cursor", "gap": 4, "padding": [ 4, 0, 0, 0 ], "alignItems": "center", "children": [ { "type": "text", "id": "GcpIC", "fill": "#64748B", "content": ">", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "frame", "id": "5QFHl", "opacity": 0.8, "width": 7, "height": 14, "fill": "#3B82F6" } ] } ] } ] } ] } ] } ] }, { "type": "frame", "id": "AnrmV", "x": 9240, "y": 0, "name": "Playground Page — Chat App", "clip": true, "width": 1440, "height": 900, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "olULH", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "fill": "#64748B", "y": 2.5 }, "10WVH": { "fill": "#64748B", "x": 72, "y": 2.5 }, "dZ5Q4": { "fill": "#64748B", "x": 163, "y": 2.5 }, "2dFBe": { "fill": "#64748B", "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "C5SWI", "name": "Toolbar", "width": "fill_container", "height": 48, "fill": "#F8FAFC", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "gap": 12, "padding": [ 0, 16, 0, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "GgDkR", "name": "tbLeft", "gap": 12, "padding": [ 0, 12 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "VU1m1", "name": "btnReset", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "gap": 6, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "kW8Ls", "width": 14, "height": 14, "iconFontName": "rotate-ccw", "iconFontFamily": "lucide", "fill": "#64748B" }, { "type": "text", "id": "0x7tq", "fill": "#64748B", "content": "Reset", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "D6YWi", "name": "tbRight", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "m1tvz", "name": "btnShare", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "gap": 6, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "Li1AR", "width": 14, "height": 14, "iconFontName": "share-2", "iconFontFamily": "lucide", "fill": "#64748B" }, { "type": "text", "id": "59oiP", "fill": "#64748B", "content": "Share", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "8wWoE", "name": "btnDownload", "cornerRadius": 6, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "gap": 6, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "cJZ5j", "width": 14, "height": 14, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#64748B" }, { "type": "text", "id": "foOJ3", "fill": "#64748B", "content": "Download", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "500" } ] } ] } ] }, { "type": "frame", "id": "48vaC", "name": "MainArea", "width": "fill_container", "height": "fill_container", "children": [ { "type": "frame", "id": "U8RLf", "name": "codeEditorPanel", "width": "fill_container", "height": "fill_container", "fill": "#0F172A", "layout": "vertical", "children": [ { "type": "frame", "id": "OvTYA", "name": "editorTabBar", "width": "fill_container", "height": 36, "fill": "#1E293B", "children": [ { "type": "frame", "id": "8s0JM", "name": "tab-active", "height": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#334155" }, "layout": "vertical", "justifyContent": "space_between", "children": [ { "type": "frame", "id": "toOz9", "name": "tabContent", "height": "fill_container", "gap": 8, "padding": [ 0, 14 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "Au5iE", "width": 14, "height": 14, "iconFontName": "file-code", "iconFontFamily": "lucide", "fill": "#0EA5E9" }, { "type": "text", "id": "AOluV", "fill": "#E2E8F0", "content": "chat.html", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "500" }, { "type": "icon_font", "id": "IDpfD", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#64748B" } ] }, { "type": "frame", "id": "WTwiX", "name": "accentLine", "width": "fill_container", "height": 2, "fill": "#0EA5E9" } ] }, { "type": "frame", "id": "TGErI", "name": "tab-add-btn", "width": 36, "height": "fill_container", "fill": "#1E293B", "stroke": { "thickness": 1, "fill": "#334155" }, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "Nyz86", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#94A3B8" } ] }, { "type": "frame", "id": "7jHJU", "name": "tabBarSpacer", "width": "fill_container", "height": "fill_container", "fill": "#1E293B" } ] }, { "type": "frame", "id": "yxuCj", "name": "codeArea", "width": "fill_container", "height": "fill_container", "padding": [ 16, 0 ], "children": [ { "type": "frame", "id": "iTRaJ", "name": "lineNumbers", "width": 40, "height": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 0, 8 ], "children": [ { "type": "text", "id": "D4t18", "fill": "#475569", "content": " 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12", "lineHeight": 1.6, "textAlign": "right", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "BJw9X", "name": "codeLines", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 0, 12 ], "children": [ { "type": "frame", "id": "KuOzC", "name": "line1", "children": [ { "type": "text", "id": "Lqzz9", "fill": "#94A3B8", "content": "<", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "2G0jH", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "94Edl", "fill": "#FDE68A", "content": " state", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "myMUL", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "XqJvQ", "fill": "#A5F3FC", "content": "\"{contacts:[], active:0}\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "3Gewf", "name": "line2", "children": [ { "type": "text", "id": "8OaSe", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "wFYyG", "fill": "#FDE68A", "content": "get", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "sk00b", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Fxd4I", "fill": "#A5F3FC", "content": "\"chat.json\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "CRI6p", "fill": "#FDE68A", "content": " as", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "u01hS", "fill": "#A5F3FC", "content": "=\"d\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "RJCLf", "name": "line3", "children": [ { "type": "text", "id": "H3BgI", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "BOV4k", "fill": "#FDE68A", "content": "then", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Vm6Um", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "ngTuc", "fill": "#A5F3FC", "content": "\"contacts=d.contacts\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Lf52X", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "OWMmK", "name": "line4", "children": [ { "type": "text", "id": "sMSGr", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "3edWM", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "8q10a", "fill": "#FDE68A", "content": " each", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Olk3s", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "c3MbH", "fill": "#A5F3FC", "content": "\"c in contacts\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "7rI9E", "fill": "#FDE68A", "content": " class", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "FEGu6", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "hSfqG", "fill": "#A5F3FC", "content": "\"contact\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "IFpwT", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "4p9n8", "name": "line5", "children": [ { "type": "text", "id": "MNQZ0", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "bxzqR", "fill": "#7DD3FC", "content": "span", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "3ZhUY", "fill": "#FDE68A", "content": " bind", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "7dAah", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "hddkN", "fill": "#A5F3FC", "content": "\"c.name\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "zOacM", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "eLUAA", "name": "line6", "children": [ { "type": "text", "id": "YsmgK", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "y9Q5p", "name": "line7", "children": [ { "type": "text", "id": "Jy8BZ", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ddsEO", "name": "line8", "children": [ { "type": "text", "id": "6IJUn", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Fkc0I", "fill": "#7DD3FC", "content": "div", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "yBoE1", "fill": "#FDE68A", "content": " each", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "DZoI5", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "VmH7w", "fill": "#A5F3FC", "content": "\"msg in messages\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "FZtdn", "fill": "#FDE68A", "content": " class", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "yHf4M", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "McHwW", "fill": "#A5F3FC", "content": "\"bubble\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "oFAs0", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "7IiBF", "name": "line9", "children": [ { "type": "text", "id": "r7MMQ", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "mC8lr", "fill": "#7DD3FC", "content": "span", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "tqvPa", "fill": "#FDE68A", "content": " bind", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "kQeaG", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "GRknp", "fill": "#A5F3FC", "content": "\"msg.text\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "O7tEh", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "CiGVY", "name": "line10", "children": [ { "type": "text", "id": "5z9Ny", "fill": "#94A3B8", "content": " ", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "HVpKk", "name": "line11", "children": [ { "type": "text", "id": "emZyc", "fill": "#94A3B8", "content": " <", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "IBkMD", "fill": "#7DD3FC", "content": "input", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "bBSjF", "fill": "#FDE68A", "content": " model", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "bSb3G", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "E51At", "fill": "#A5F3FC", "content": "\"newMsg\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Rz7Ec", "fill": "#FDE68A", "content": " placeholder", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "lJcWS", "fill": "#94A3B8", "content": "=", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "kUaIi", "fill": "#A5F3FC", "content": "\"Type...\"", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "h9Vch", "fill": "#94A3B8", "content": ">", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "YYRFb", "name": "line12", "children": [ { "type": "text", "id": "yl1ni", "fill": "#94A3B8", "content": "", "fontFamily": "JetBrains Mono, monospace", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "1rbtz", "name": "splitter", "width": 4, "height": "fill_container", "fill": "#334155" }, { "type": "frame", "id": "rmVSg", "name": "rightPanel", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "46b0S", "name": "previewTabBar", "width": "fill_container", "height": 36, "fill": "#F8FAFC", "gap": 8, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "LI6Ex", "width": 14, "height": 14, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "#3B82F6" }, { "type": "text", "id": "MGjvQ", "fill": "#1E293B", "content": "Preview", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "frame", "id": "YzTYi", "width": "fill_container", "height": "fit_content(0)" }, { "type": "icon_font", "id": "lKwvu", "name": "dl2", "width": 14, "height": 14, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#94A3B8" }, { "type": "icon_font", "id": "SzN7g", "width": 14, "height": 14, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "#94A3B8" } ] }, { "type": "frame", "id": "brMK0", "name": "previewArea", "clip": true, "width": "fill_container", "height": "fill_container", "fill": "#F8FAFC", "children": [ { "type": "frame", "id": "WaAur", "name": "chatSidebar", "width": 200, "height": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "children": [ { "type": "frame", "id": "D1uGD", "name": "sidebarHeader", "width": "fill_container", "stroke": { "thickness": { "bottom": 1 }, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 2, "padding": [ 14, 14, 12, 14 ], "children": [ { "type": "text", "id": "v3TKs", "fill": "#0F172A", "content": "💬 Messages", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "700" }, { "type": "text", "id": "20ycy", "fill": "#94A3B8", "content": "2 online", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "9VXko", "name": "contacts", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 2, "padding": [ 8, 0, 8, 6 ], "children": [ { "type": "frame", "id": "Tle6e", "name": "contactAlice", "width": "fill_container", "fill": "#EFF6FF", "cornerRadius": [ 8, 0, 0, 8 ], "gap": 8, "padding": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "fGfXn", "name": "ct1info", "width": "fill_container", "layout": "vertical", "gap": 1, "children": [ { "type": "text", "id": "YlboB", "fill": "#0F172A", "content": "Alice Chen", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "text", "id": "Zd7Xo", "fill": "#94A3B8", "content": "Can you share the code?", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" } ] }, { "type": "frame", "id": "yqtEZ", "width": 7, "height": 7, "fill": "#22C55E", "cornerRadius": 100 } ] }, { "type": "frame", "id": "F1XZz", "name": "contactBob", "width": "fill_container", "fill": "transparent", "cornerRadius": [ 8, 0, 0, 8 ], "gap": 8, "padding": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "ksQ4B", "name": "ct2info", "width": "fill_container", "layout": "vertical", "gap": 1, "children": [ { "type": "text", "id": "8q5IN", "fill": "#334155", "content": "Bob Smith", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "text", "id": "33DiQ", "fill": "#94A3B8", "content": "Got it, I will prepare the...", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" } ] }, { "type": "frame", "id": "YRgEm", "width": 7, "height": 7, "fill": "#22C55E", "cornerRadius": 100 } ] }, { "type": "frame", "id": "j5DrM", "name": "contactCarol", "width": "fill_container", "fill": "transparent", "cornerRadius": [ 8, 0, 0, 8 ], "gap": 8, "padding": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "EX1xe", "name": "ct3info", "width": "fill_container", "layout": "vertical", "gap": 1, "children": [ { "type": "text", "id": "7QhJf", "fill": "#64748B", "content": "Carol Dev", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "text", "id": "mwFT1", "fill": "#94A3B8", "content": "PR approved! Great work 🎉", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" } ] }, { "type": "frame", "id": "VtAFc", "width": 7, "height": 7, "fill": "#64748B", "cornerRadius": 100 } ] }, { "type": "frame", "id": "KbYIa", "name": "contactDave", "width": "fill_container", "fill": "transparent", "cornerRadius": [ 8, 0, 0, 8 ], "gap": 8, "padding": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "ucdSp", "name": "ct4info", "width": "fill_container", "layout": "vertical", "gap": 1, "children": [ { "type": "text", "id": "Vy7sj", "fill": "#64748B", "content": "Dave Ops", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500" }, { "type": "text", "id": "Pughl", "fill": "#94A3B8", "content": "Deployment successful ✅", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "normal" } ] }, { "type": "frame", "id": "TOM4N", "width": 7, "height": 7, "fill": "#64748B", "cornerRadius": 100 } ] } ] } ] }, { "type": "frame", "id": "WY7ca", "name": "chatMain", "width": "fill_container", "height": "fill_container", "fill": "#EFF6FF", "layout": "vertical", "children": [ { "type": "frame", "id": "uXhDf", "name": "chatHeader", "width": "fill_container", "fill": "#FFFFFF", "gap": 10, "padding": [ 10, 16 ], "alignItems": "center", "children": [ { "type": "frame", "id": "8PmNW", "width": 32, "height": 32, "fill": "#0EA5E9", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "rfPU5", "name": "icon1", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#FFFFFF" } ] }, { "type": "frame", "id": "MvAHH", "name": "headInfo", "layout": "vertical", "gap": 1, "children": [ { "type": "text", "id": "lYSkM", "fill": "#0F172A", "content": "Alice Chen", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "nQPR9", "fill": "#22C55E", "content": "● Online", "fontFamily": "Inter", "fontSize": 9, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "Nx7Y7", "name": "messagesArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 8, "padding": [ 12, 16 ], "children": [ { "type": "frame", "id": "85mLP", "name": "msgReceived1", "fill": "#FFFFFF", "cornerRadius": [ 12, 12, 12, 2 ], "layout": "vertical", "gap": 4, "padding": [ 8, 12 ], "children": [ { "type": "text", "id": "fZsas", "fill": "#0F172A", "content": "Hey! Have you seen the new No.JS update?", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "yEdR7", "fill": "#94A3B8", "content": "10:30", "fontFamily": "Inter", "fontSize": 8, "fontWeight": "normal" } ] }, { "type": "frame", "id": "dfK0F", "name": "msgReceived2", "fill": "#FFFFFF", "cornerRadius": [ 12, 12, 12, 2 ], "layout": "vertical", "gap": 4, "padding": [ 8, 12 ], "children": [ { "type": "text", "id": "Cx3wD", "fill": "#0F172A", "content": "Right? Zero dependencies, pure HTML!", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "GgUoM", "fill": "#94A3B8", "content": "10:33", "fontFamily": "Inter", "fontSize": 8, "fontWeight": "normal" } ] }, { "type": "frame", "id": "RhcOu", "name": "msgReceived3", "fill": "#FFFFFF", "cornerRadius": [ 12, 12, 12, 2 ], "layout": "vertical", "gap": 4, "padding": [ 8, 12 ], "children": [ { "type": "text", "id": "HMTWw", "fill": "#0F172A", "content": "Can you share the code?", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "jTY0k", "fill": "#94A3B8", "content": "10:36", "fontFamily": "Inter", "fontSize": 8, "fontWeight": "normal" } ] }, { "type": "frame", "id": "vbwjb", "name": "sentRow1", "width": "fill_container", "justifyContent": "end", "children": [ { "type": "frame", "id": "W58fN", "name": "msgSent1", "fill": "#0EA5E9", "cornerRadius": [ 12, 12, 2, 12 ], "layout": "vertical", "gap": 4, "padding": [ 8, 12 ], "children": [ { "type": "text", "id": "oYBi0", "fill": "#FFFFFF", "content": "Yes! The reactive state is amazing 🚀", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "WB2JL", "fill": "#BFDBFE", "content": "10:32", "fontFamily": "Inter", "fontSize": 8, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "4Qbxa", "name": "sentRow2", "width": "fill_container", "justifyContent": "end", "children": [ { "type": "frame", "id": "Y87P0", "name": "msgSent2", "fill": "#0EA5E9", "cornerRadius": [ 12, 12, 2, 12 ], "layout": "vertical", "gap": 4, "padding": [ 8, 12 ], "children": [ { "type": "text", "id": "aicAe", "fill": "#FFFFFF", "content": "I built a whole dashboard with just state and bind", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "UpVYe", "fill": "#BFDBFE", "content": "10:35", "fontFamily": "Inter", "fontSize": 8, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "Rka6e", "name": "inputArea", "width": "fill_container", "fill": "#FFFFFF", "gap": 8, "padding": [ 10, 16 ], "alignItems": "center", "children": [ { "type": "frame", "id": "qAaFk", "name": "inputBox", "width": "fill_container", "height": 32, "fill": "#F1F5F9", "cornerRadius": 16, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "ufJTa", "fill": "#94A3B8", "content": "Type a message...", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "QPME5", "width": 32, "height": 32, "fill": "#0EA5E9", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "CACcN", "fill": "#FFFFFF", "content": "▶", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "mmXzA", "name": "consoleSplitter", "width": "fill_container", "height": 4, "fill": "#E2E8F0" }, { "type": "frame", "id": "Vx7NZ", "name": "consolePanel", "width": "fill_container", "height": 160, "fill": "#0F172A", "layout": "vertical", "children": [ { "type": "frame", "id": "fcQ3N", "name": "consoleTabBar", "width": "fill_container", "height": 32, "fill": "#1E293B", "gap": 8, "padding": [ 0, 12 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "8jy56", "width": 14, "height": 14, "iconFontName": "terminal", "iconFontFamily": "lucide", "fill": "#22C55E" }, { "type": "text", "id": "R53zX", "fill": "#E2E8F0", "content": "Console", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" }, { "type": "frame", "id": "zLrOb", "width": "fill_container", "height": "fit_content(0)" }, { "type": "icon_font", "id": "Cc3az", "width": 13, "height": 13, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#64748B" } ] }, { "type": "frame", "id": "PoZuy", "name": "consoleBody", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 8, 12 ], "children": [ { "type": "frame", "id": "vf0Yz", "name": "log1", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "LSu4P", "fill": "#22C55E", "content": "›", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "iN1od", "fill": "#94A3B8", "content": "[No.JS] initialized — v1.2.1", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "6kcw0", "name": "log2", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "5446O", "fill": "#22C55E", "content": "›", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "EP59L", "fill": "#94A3B8", "content": "[No.JS] fetch: /data/dashboard.json — 200 OK", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "6aXx4", "name": "log3", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "LErtm", "fill": "#60A5FA", "content": "›", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "h68ZG", "fill": "#94A3B8", "content": "[No.JS] rendered Dashboard — 3 templates, 4 stats", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "0JCF5", "name": "cursor", "gap": 4, "padding": [ 4, 0, 0, 0 ], "alignItems": "center", "children": [ { "type": "text", "id": "mdsRa", "fill": "#64748B", "content": ">", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" }, { "type": "frame", "id": "kcJe5", "opacity": 0.8, "width": 7, "height": 14, "fill": "#3B82F6" } ] } ] } ] } ] } ] } ] }, { "type": "frame", "id": "Pxden", "x": 10780, "y": 0, "name": "FAQ Page", "clip": true, "width": 1440, "fill": "#FFFFFF", "layout": "vertical", "children": [ { "id": "yws3U", "type": "ref", "ref": "BU3E9", "name": "header", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fit_content", "x": 80, "y": 21 }, "Hd14D": { "y": 0 }, "KInhD": { "x": 36, "y": 1 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 4.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fit_content", "x": 543, "y": 16 }, "Jw91v": { "width": "fit_content", "height": "fit_content", "y": 8 }, "hNavHome": { "y": 2.5 }, "10WVH": { "x": 72, "y": 2.5 }, "dZ5Q4": { "x": 163, "y": 2.5 }, "2dFBe": { "x": 260, "y": 2.5 }, "GphrL": { "x": 320, "y": 2.5 }, "qJFiR": { "x": 428, "y": 2.5 }, "FNzKS": { "x": 495, "y": 0 }, "od4kB": { "x": 549, "y": 2 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605, "y": 0 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 3.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "id": "beoxu", "type": "ref", "ref": "zZ30X", "name": "hero", "width": "fill_container", "height": "fit_content", "y": 70, "descendants": { "yj5cg": { "width": "fit_content", "height": "fit_content", "x": 647.5, "y": 60 }, "x1nuT": { "content": "Browse Questions", "x": 16, "y": 8 }, "3iBsZ": { "content": "Frequently Asked Questions", "x": 395.5, "y": 112 }, "aeLdw": { "content": "Find answers to common questions about No.JS framework, features, and best practices.", "textGrowth": "fixed-width", "width": 600, "x": 420, "y": 193 } } }, { "type": "frame", "id": "h8Enp", "name": "Search Section", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 12, "padding": [ 0, 80 ], "alignItems": "center", "children": [ { "type": "frame", "id": "Zaijg", "name": "Search Container", "width": "fill_container", "layout": "vertical", "gap": 16, "padding": [ 40, 0 ], "alignItems": "center", "children": [ { "type": "frame", "id": "o0iot", "name": "Search Bar", "width": 600, "height": 52, "fill": "#FFFFFF", "cornerRadius": 12, "stroke": { "thickness": 1.5, "fill": "#E2E8F0" }, "gap": 12, "padding": [ 0, 20 ], "alignItems": "center", "children": [ { "type": "text", "id": "L2OxK", "name": "searchIcon", "fill": "#94A3B8", "content": "🔍", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "text", "id": "jlWUf", "name": "searchPlaceholder", "fill": "#94A3B8", "content": "Search the FAQ", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "clotX", "name": "Main Content Area", "width": "fill_container", "gap": 48, "padding": [ 40, 80, 60, 80 ], "children": [ { "type": "frame", "id": "FMcPJ", "name": "Sidebar", "width": 240, "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "QuZGz", "name": "sh1", "fill": "#0F172A", "content": "Questions", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "bold", "letterSpacing": 0.5 }, { "id": "vkZoG", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 21, "descendants": { "g1NfQ": { "content": "Getting Started", "fill": "#0EA5E9", "fontWeight": "500", "x": 12, "y": 8 } } }, { "id": "AAVPb", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 58, "descendants": { "g1NfQ": { "content": "Core Concepts", "x": 12, "y": 8 } } }, { "id": "Grnpj", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 95, "descendants": { "g1NfQ": { "content": "Features & Capabilities", "x": 12, "y": 8 } } }, { "id": "nUt0M", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 132, "descendants": { "g1NfQ": { "content": "Performance & Production", "x": 12, "y": 8 } } }, { "type": "frame", "id": "yw9U7", "name": "spacer", "width": "fill_container", "height": 16 }, { "type": "text", "id": "1Rqyc", "name": "sh2", "fill": "#0F172A", "content": "Resources", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "bold", "letterSpacing": 0.5 }, { "id": "mI0jY", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 210, "descendants": { "g1NfQ": { "content": "Documentation", "x": 12, "y": 8 } } }, { "id": "4PPFP", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 247, "descendants": { "g1NfQ": { "content": "Examples", "x": 12, "y": 8 } } }, { "id": "yNHO5", "type": "ref", "ref": "LLeQe", "name": "navLink", "width": "fill_container", "height": "fit_content", "y": 284, "descendants": { "g1NfQ": { "content": "GitHub Discussions", "x": 12, "y": 8 } } } ] }, { "type": "frame", "id": "8iyN8", "name": "Content Area", "width": "fill_container", "layout": "vertical", "children": [ { "type": "frame", "id": "E3AxD", "name": "Getting Started Section", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "padding": [ 40, 0 ], "children": [ { "type": "text", "id": "lh64H", "name": "cat1Title", "fill": "#0F172A", "content": "Getting Started", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "type": "frame", "id": "FL9cy", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "0pUOi", "name": "Q1 - What is No.JS", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "xJwLl", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "sNB2F", "name": "q1t", "fill": "#0F172A", "content": "What is No.JS?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "fakMA", "name": "q1i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "UugYs", "name": "q1a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS is an HTML-first reactive framework that lets you build dynamic web applications using only HTML attributes — no JavaScript compilation, no virtual DOM, no build step required. It weighs just 14 KB gzipped and provides reactivity, routing, data fetching, i18n, animations, and more out of the box.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", "id": "AosqB", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "zaPaP", "name": "Q2 - Install", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "jeImq", "name": "q2t", "fill": "#0F172A", "content": "How do I install No.JS?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "yyHAg", "name": "q2i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "qxXbY", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "KUt35", "name": "Q3 - JavaScript", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "AIkZx", "name": "q3t", "fill": "#0F172A", "content": "Do I need to know JavaScript to use No.JS?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "7wUsT", "name": "q3i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "H5dAY", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "mQYfq", "name": "Q4 - Browsers", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "YZigH", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "9sYJr", "name": "q4t", "fill": "#0F172A", "content": "What browsers are supported?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "BshQ4", "name": "q4i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "9pP3N", "name": "q4a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS supports all modern browsers including Chrome, Firefox, Safari, and Edge. It requires no polyfills and uses standard Web APIs available in all evergreen browsers.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Nf5Zq", "name": "Core Concepts Section", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "padding": [ 40, 0 ], "children": [ { "type": "text", "id": "B4opY", "name": "cat2Title", "fill": "#0F172A", "content": "Core Concepts", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "type": "frame", "id": "MYCWV", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "ZlO8r", "name": "Q5 - Reactivity", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "lVkOq", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "AeODW", "name": "q5t", "fill": "#0F172A", "content": "How does reactivity work in No.JS?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "FDyZD", "name": "q5i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "smrCb", "name": "q5a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS uses JavaScript Proxy objects to create reactive state. When you declare state with the :state directive, changes automatically propagate to all bound elements in the DOM — no manual updates, no setState calls, no re-renders needed.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", "id": "jEkKB", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "wXEY2", "name": "Q6 - Directives", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "smAMo", "name": "q6t", "fill": "#0F172A", "content": "What are directives?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "yCBDa", "name": "q6i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "ZeXFf", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "MXAsJ", "name": "Q7 - Existing Projects", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "DGiFJ", "name": "q7t", "fill": "#0F172A", "content": "Can I use No.JS with existing projects?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "ey81E", "name": "q7i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "y9p9W", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "17vcZ", "name": "Q8 - Comparison", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "TEmjz", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "NDAJ9", "name": "q8t", "fill": "#0F172A", "content": "How does No.JS compare to React or Vue?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "GZrft", "name": "q8i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "2oHF8", "name": "q8a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Unlike React or Vue, No.JS requires no build step, no virtual DOM, and no JavaScript files. You write everything in HTML attributes. The result is dramatically smaller bundles (14 KB vs 100+ KB) and simpler deployment — just ship HTML.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "zUpRM", "name": "Features Section", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "padding": [ 40, 0 ], "children": [ { "type": "text", "id": "o68xL", "name": "cat3Title", "fill": "#0F172A", "content": "Features & Capabilities", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "type": "frame", "id": "coa1s", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "NMl95", "name": "Q9 - Routing", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "OuPdj", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "tfOES", "name": "q9t", "fill": "#0F172A", "content": "Does No.JS support client-side routing?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "Gqklt", "name": "q9i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "44L1G", "name": "q9a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Yes. No.JS includes a built-in SPA router with support for path parameters, query strings, hash-based routing, and file-based route loading. Define routes with simple HTML attributes — no configuration files needed.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", "id": "RZ1iy", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "ejnZD", "name": "Q10 - API", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "J0VV9", "name": "q10t", "fill": "#0F172A", "content": "Can I fetch data from APIs?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "H4IGJ", "name": "q10i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "iwMus", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "KmvVJ", "name": "Q11 - i18n", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "Ze2iR", "name": "q11t", "fill": "#0F172A", "content": "Is internationalization (i18n) supported?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "g2dlc", "name": "q11i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "05Akk", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "vui1l", "name": "Q12 - Validation", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "3rIFf", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "XcjCM", "name": "q12t", "fill": "#0F172A", "content": "How do I handle form validation?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "thWmd", "name": "q12i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "D0o1d", "name": "q12a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS provides declarative form validation through the :validate directive. You can define rules, custom error messages, and validation patterns directly in your HTML markup — including required fields, min/max length, email format, and custom regex.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "xRSvj", "name": "Performance Section", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "padding": [ 40, 0 ], "children": [ { "type": "text", "id": "DzxWB", "name": "cat4Title", "fill": "#0F172A", "content": "Performance & Production", "fontFamily": "Space Grotesk", "fontSize": 28, "fontWeight": "bold" }, { "type": "frame", "id": "a4DKv", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "8Z91X", "name": "Q13 - Bundle Size", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "amCeS", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "NnzVC", "name": "q13t", "fill": "#0F172A", "content": "How big is the No.JS bundle?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "oLyU2", "name": "q13i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "FBrNZ", "name": "q13a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "The complete No.JS framework is approximately 14 KB gzipped. This includes all features: reactivity, routing, data fetching, i18n, animations, drag & drop, and form validation. Compare that to React (44 KB) + React DOM (130 KB).", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", "id": "DmUUT", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "0sbo8", "name": "Q14 - Production", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "8NSk6", "name": "q14t", "fill": "#0F172A", "content": "Is No.JS production-ready?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "caWza", "name": "q14i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "fIUa0", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "Gd6EY", "name": "Q15 - CDN", "width": "fill_container", "padding": [ 24, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "KYAln", "name": "q15t", "fill": "#0F172A", "content": "Can I use No.JS from a CDN?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "Isluo", "name": "q15i", "fill": "#94A3B8", "content": "+", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "frame", "id": "NUF1l", "name": "divider", "width": "fill_container", "height": 1, "fill": "#E2E8F0" }, { "type": "frame", "id": "Ve4jZ", "name": "Q16 - Build Step", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 24, 0 ], "children": [ { "type": "frame", "id": "aV0VV", "name": "Question Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "osKZL", "name": "q16t", "fill": "#0F172A", "content": "Do I need a build step?", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "5R3eh", "name": "q16i", "fill": "#0EA5E9", "content": "−", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "300" } ] }, { "type": "text", "id": "pxQSV", "name": "q16a", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "No. No.JS works directly in the browser with a single script tag. There's no compilation, transpilation, or bundling required. Just include the CDN link and start building. Your deployment is as simple as uploading HTML files.", "lineHeight": 1.7, "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" } ] } ] } ] } ] }, { "id": "Ax1DF", "type": "ref", "ref": "CaSRr", "name": "ctaSection", "width": "fill_container", "height": "fit_content", "y": 2866, "descendants": { "GZpIo": { "content": "Still Have Questions?", "x": 537.5, "y": 80 }, "bCVoG": { "content": "Check out the documentation or join the community for help.", "x": 461.5, "y": 146 }, "G35UI": { "width": "fit_content", "height": "fit_content", "x": 519.5, "y": 188 }, "F09N1": { "width": "fit_content", "height": "fit_content" }, "VDbZ0": { "content": "View Documentation", "x": 24, "y": 12 }, "BlI0n": { "width": "fit_content", "height": "fit_content", "x": 214 }, "FdLAq": { "content": "GitHub Discussions", "x": 24, "y": 12 } } }, { "id": "gZRaL", "type": "ref", "ref": "OIXap", "name": "footer", "width": "fill_container", "height": "fit_content", "y": 3177, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] }, { "type": "frame", "id": "JWtJT", "x": 12420, "y": 0, "name": "LP v8 — Proposal", "width": 1440, "layout": "vertical", "children": [ { "id": "NgP4S", "type": "ref", "ref": "BU3E9", "name": "hdr8", "width": "fill_container", "x": 0, "y": 0, "descendants": { "I9WGi": { "width": "fit_content", "height": "fill_container", "x": 80, "y": 0 }, "KInhD": { "x": 36, "y": 22 }, "vcBs8": { "width": "fit_content", "height": "fit_content", "x": 100, "y": 25.5 }, "DAx4w": { "x": 8, "y": 2 }, "TE8iy": { "width": "fit_content", "height": "fill_container", "x": 543, "y": 0 }, "Jw91v": { "width": "fit_content", "height": "fill_container", "y": 0 }, "hNavHome": { "y": 26.5 }, "10WVH": { "x": 72, "y": 26.5 }, "dZ5Q4": { "x": 163, "y": 26.5 }, "2dFBe": { "x": 260, "y": 26.5 }, "GphrL": { "x": 320, "y": 26.5 }, "qJFiR": { "x": 428, "y": 26.5 }, "FNzKS": { "x": 495 }, "od4kB": { "x": 549 }, "T3ETl": { "width": "fit_content", "height": "fit_content", "x": 605 }, "pIeZv": { "x": 20, "y": 10 }, "TwvA6": { "width": "fit_content", "height": "fit_content", "x": 756, "y": 19.5 }, "Qmthf": { "x": 10, "y": 6 }, "dTwug": { "x": 37, "y": 8.5 } } }, { "type": "frame", "id": "qgOPj", "name": "Hero Section", "width": "fill_container", "fill": { "type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 180, "size": { "height": 1 }, "colors": [ { "color": "#0F172A", "position": 0 }, { "color": "#1E293B", "position": 1 } ] }, "layout": "vertical", "gap": 32, "padding": [ 140, 80, 80, 80 ], "alignItems": "center", "children": [ { "type": "frame", "id": "2W8Pn", "name": "heroBadge", "fill": "#0EA5E91A", "cornerRadius": 100, "stroke": { "thickness": 1, "fill": "#0EA5E966" }, "padding": [ 8, 16 ], "children": [ { "type": "text", "id": "kZNx8", "name": "heroBadgeTxt", "fill": "#0EA5E9", "content": "HTML-first reactive framework", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "text", "id": "eZVyC", "name": "heroH1", "fill": "#FFFFFF", "textGrowth": "fixed-width", "width": 900, "content": "Build reactive apps\nwith zero JavaScript.", "lineHeight": 1.1, "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 72, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "YduCt", "name": "heroSub", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": 700, "content": "No.JS is an HTML-first framework that turns attributes into a full\nreactive engine. ~20 KB gzipped, zero dependencies, zero build step.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" }, { "type": "frame", "id": "4ensL", "name": "heroCTAs", "gap": 16, "alignItems": "center", "children": [ { "type": "frame", "id": "ReMFx", "name": "heroBtn1", "fill": "#0EA5E9", "cornerRadius": 8, "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "GoKvO", "name": "heroBtn1Txt", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "600" } ] }, { "type": "frame", "id": "0U3Kd", "name": "heroBtn2", "cornerRadius": 8, "stroke": { "thickness": 1, "fill": "#475569" }, "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "MEJBT", "name": "heroBtn2Txt", "fill": "#CBD5E1", "content": "Playground", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "RAy8b", "name": "installWidget", "clip": true, "width": 560, "fill": "#1E293B", "cornerRadius": 8, "stroke": { "thickness": 1, "fill": "#334155" }, "layout": "vertical", "children": [ { "type": "frame", "id": "suwZo", "name": "installTabs", "width": "fill_container", "fill": "#0F172A", "children": [ { "type": "frame", "id": "cwFI6", "name": "tabCDN", "fill": "#1E293B", "padding": [ 10, 18 ], "children": [ { "type": "text", "id": "HNnap", "name": "tabCDNtxt", "fill": "#0EA5E9", "content": "CDN", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "16RmK", "name": "installCode", "width": "fill_container", "padding": [ 14, 20 ], "children": [ { "type": "text", "id": "FN5gc", "name": "installCodeTxt", "fill": "#E2E8F0", "content": "", "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "f1ex6", "name": "code8", "width": "fill_container", "fill": "#FFFFFF", "layout": "vertical", "gap": 40, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "jrqup", "name": "v2_comp_lbl", "fill": "#0F172A", "textGrowth": "fixed-width", "width": 700, "content": "The same app.\nThe real difference.", "lineHeight": 1.2, "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "Lginq", "name": "v2_comp_sub", "fill": "#64748B", "content": "A reactive search box — the most common real-world pattern.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "normal" }, { "type": "frame", "id": "wI6xj", "name": "Panels", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "vj5oH", "name": "React Panel", "width": "fill_container", "fill": "#0F172A", "cornerRadius": 12, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "wRwZm", "name": "v2_left_top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "X1CKB", "name": "v2_left_label", "fill": "#F87171", "content": "React", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "W8NYo", "name": "v2_left_lines", "fill": "#64748B", "content": "25 lines · react, react-dom, useState, useEffect", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "sDFyi", "name": "ReactCodeRow", "width": "fill_container", "gap": 12, "children": [ { "type": "text", "id": "T7hgh", "name": "reactLineNums", "opacity": 0.45, "fill": "#475569", "content": " 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "Btx40", "name": "v2_left_code", "fill": "#E2E8F0", "textGrowth": "fixed-width", "width": "fill_container", "content": "import { useState, useEffect } from 'react';\n\nconst Search = () => {\n const [query, setQuery] = useState('');\n const [results, setResults] = useState([]);\n\n useEffect(() => {\n if (!query) return;\n fetch(`/api/search?q=${query}`)\n .then(r => r.json())\n .then(setResults);\n }, [query]);\n\n return (\n
    \n setQuery(e.target.value)}\n />\n {results.map(r => (\n
  • {r.name}
    • \n ))}\n
    \n );\n};", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "knnW8", "name": "NoJS Panel", "width": "fill_container", "fill": "#0F172A", "cornerRadius": 12, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "frame", "id": "WQyUV", "name": "v2_right_top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "DMheR", "name": "v2_right_label", "fill": "#0EA5E9", "content": "No.JS", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "SeMfA", "name": "v2_right_lines", "fill": "#64748B", "content": "4 lines · 0 imports", "fontFamily": "JetBrains Mono", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "RIcgx", "name": "NojsCodeRow", "width": "fill_container", "gap": 12, "children": [ { "type": "text", "id": "uEMv4", "name": "nojsLineNums", "opacity": 0.45, "fill": "#475569", "content": "1\n2\n3\n4\n5", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "klWpu", "name": "v2_right_code", "fill": "#A5F3FC", "textGrowth": "fixed-width", "width": "fill_container", "content": "
    \n \n
  • \n
    ", "lineHeight": 1.7, "fontFamily": "JetBrains Mono", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "text", "id": "0Dum1", "name": "v2_right_note", "fill": "#0EA5E9", "content": "✓ Reactive · ✓ Auto-fetches · ✓ No build step", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "medium" } ] } ] } ] }, { "type": "frame", "id": "iI8Kz", "name": "Features Grid", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 48, "padding": [ 100, 80 ], "alignItems": "center", "children": [ { "type": "text", "id": "GTbvg", "name": "featKicker", "fill": "#0EA5E9", "content": "WHAT YOU GET", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "text", "id": "YtIYZ", "name": "featH1", "fill": "#0F172A", "textGrowth": "fixed-width", "width": 700, "content": "Everything your app needs.\nNothing it doesn't.", "lineHeight": 1.2, "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "27CHl", "name": "featSub", "fill": "#64748B", "textGrowth": "fixed-width", "width": 700, "content": "40+ directives, built-in routing, i18n, forms, fetch, animations — all via HTML attributes.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "normal" }, { "type": "frame", "id": "IWBZK", "name": "featGrid", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "TT52J", "name": "featRow1", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "MiUib", "name": "featCard1", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "text", "id": "ihqGT", "name": "c1icon", "content": "⚡", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "5oeq7", "name": "c1title", "fill": "#0F172A", "content": "Reactive State", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "Mb8Uu", "name": "c1desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Declare state with a single attribute. Two-way binding, computed values, and watchers — all without writing a line of JavaScript.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Duw7P", "name": "featCard2", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "text", "id": "ld0p3", "name": "c2icon", "content": "🌐", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "xuTPU", "name": "c2title", "fill": "#0F172A", "content": "SPA Router", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "7wffJ", "name": "c2desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Client-side routing with path params, wildcards, guards, nested routes, and lazy-loaded templates. No config files.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "qJ2XW", "name": "featCard3", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "text", "id": "kgait", "name": "c3icon", "content": "🌍", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "tNKAa", "name": "c3title", "fill": "#0F172A", "content": "i18n Built-in", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "PU1UG", "name": "c3desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Locale switching, namespace loading, pluralization, and RTL support. All powered by a single t attribute.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "t4rm8", "name": "featRow2", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "21wnA", "name": "featCard4", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "text", "id": "Isz9n", "name": "c4icon", "content": "📡", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "iHqpO", "name": "c4title", "fill": "#0F172A", "content": "Declarative Fetch", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "wdEYe", "name": "c4desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "GET, POST, PUT, DELETE — just add the attribute. Auto-binding to state, loading indicators, and error handling included.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "gLYF3", "name": "featCard5", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "text", "id": "OLkjR", "name": "c5icon", "content": "✅", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "i7vc3", "name": "c5title", "fill": "#0F172A", "content": "Form Validation", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "1Hq0r", "name": "c5desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "15+ built-in validators with custom error messages, conditional validation, and real-time feedback. Pure HTML.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Ps05y", "name": "featCard6", "width": "fill_container", "fill": "#F8FAFC", "cornerRadius": 12, "stroke": { "thickness": 1, "fill": "#E2E8F0" }, "layout": "vertical", "gap": 16, "padding": 28, "children": [ { "type": "text", "id": "J8dob", "name": "c6icon", "content": "✨", "fontFamily": "Inter", "fontSize": 28, "fontWeight": "normal" }, { "type": "text", "id": "oTKX4", "name": "c6title", "fill": "#0F172A", "content": "Animations", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "tdO3d", "name": "c6desc", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "CSS-class transitions with stagger support. Enter, leave and move animations driven entirely by attributes.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "iQhsG", "name": "bundle8", "width": "fill_container", "fill": "#ffffff", "layout": "vertical", "gap": 24, "padding": [ 100, 80, 80, 80 ], "alignItems": "center", "children": [ { "type": "frame", "id": "HdDcY", "name": "v6_badge", "fill": "#F0F9FF", "cornerRadius": 100, "stroke": { "thickness": 1, "fill": "#BAE6FD" }, "padding": [ 8, 16 ], "children": [ { "type": "text", "id": "hxoAE", "name": "v6_badge_t", "fill": "#0284C7", "content": "The outcome.", "fontFamily": "Space Grotesk", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "text", "id": "E2Bkk", "name": "v2_h1", "fill": "#0f172a", "content": "Your bundle is 2.3 MB.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "YNoqz", "name": "v2_h2", "fill": "#0EA5E9", "content": "Ours is 20 KB.", "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "BYgiV", "name": "v2_sub", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": 520, "content": "No build step. No bundler. No excuses.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "normal" }, { "type": "frame", "id": "3tZ9R", "name": "v2_btns", "gap": 16, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "vZFFk", "name": "v2_btn1", "fill": "#0EA5E9", "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "ZKqqP", "name": "v2_btn1t", "fill": "#FFFFFF", "content": "Get Started", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "semibold" } ] }, { "type": "frame", "id": "Spgni", "name": "v2_btn2", "fill": "#0f172a", "stroke": { "thickness": 1 }, "padding": [ 14, 32 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "inTiZ", "name": "v2_btn2t", "fill": "#FFFFFF", "content": "Read the Docs", "fontFamily": "Space Grotesk", "fontSize": 16, "fontWeight": "medium" } ] } ] } ] }, { "type": "frame", "id": "c3MUG", "name": "hero8", "width": "fill_container", "fill": "#0F172A", "layout": "vertical", "gap": 32, "padding": [ 120, 80, 100, 80 ], "children": [ { "type": "text", "id": "zOTbg", "name": "v5_kicker", "fill": "#475569", "content": "A MANIFESTO", "fontFamily": "Space Grotesk", "fontSize": 12, "fontWeight": "700", "letterSpacing": 4 }, { "type": "text", "id": "2sjsz", "name": "v5_h1", "fill": "#FFFFFF", "textGrowth": "fixed-width", "width": 900, "content": "The web was already reactive.", "fontFamily": "Space Grotesk", "fontSize": 64, "fontWeight": "bold", "letterSpacing": -3 }, { "type": "text", "id": "HxMD9", "name": "v5_h2", "fill": "#0EA5E9", "textGrowth": "fixed-width", "width": 800, "content": "We just gave HTML the attributes to prove it.", "fontFamily": "Space Grotesk", "fontSize": 36, "fontWeight": "normal", "letterSpacing": -1 }, { "type": "frame", "id": "X8jrZ", "name": "v5_divider", "width": 120, "height": 3, "fill": "#0EA5E9" } ] }, { "type": "frame", "id": "xFklp", "name": "prob8", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "layout": "vertical", "gap": 60, "padding": 80, "children": [ { "type": "text", "id": "gFo62", "name": "v5_ed_lbl", "fill": "#475569", "content": "THE PROBLEM WITH MODERN JAVASCRIPT", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "frame", "id": "F0tpM", "name": "Columns", "width": "fill_container", "gap": 48, "children": [ { "type": "frame", "id": "oUqJz", "name": "v5_col1", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "HXRBf", "name": "v5_col1_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "Somewhere between \"component thinking\" and \"virtual DOM diffing\", we forgot that the browser already understands HTML. It already knows how to update the DOM. It already handles events.\n\nWe built abstraction upon abstraction until a simple form required three files, a build pipeline, and a framework runtime.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "NNwwQ", "name": "v5_col2", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "hrwhn", "name": "v5_col2_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "No.JS is the opposite bet. The browser is not the enemy — it's the platform. HTML is not limited — it's underutilized. Attributes are not primitive — they're a DSL waiting to happen.\n\nWe built No.JS on one conviction: if you can express it in HTML, you should.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ZGjFi", "name": "v5_col3", "width": "fill_container", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "PLBxG", "name": "v5_col3_t", "fill": "#94A3B8", "textGrowth": "fixed-width", "width": "fill_container", "content": "The result is a framework you can learn in an afternoon and ship in 30 seconds. Not because we made it simple — but because the browser was already capable. We just got out of the way.\n\nThis is not anti-JavaScript. It's pro-HTML.", "lineHeight": 1.8, "fontFamily": "Inter", "fontSize": 15, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "NT4ym", "name": "prins8", "width": "fill_container", "fill": "#0A1020", "stroke": { "thickness": { "top": 1 }, "fill": "#1E293B" }, "layout": "vertical", "gap": 48, "padding": 80, "children": [ { "type": "text", "id": "T2yrv", "name": "v5_pr_lbl", "fill": "#475569", "content": "OUR PRINCIPLES", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "frame", "id": "Ftx8w", "name": "v5_pr_row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "YvXg9", "name": "v5_p1", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "78t0n", "name": "v5_p1n", "fill": "#0EA5E9", "content": "01", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "GYmaH", "name": "v5_p1t", "fill": "#FFFFFF", "content": "The browser is the platform", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "LJPsH", "name": "v5_p1d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "We don't abstract the browser. We extend HTML to use it fully.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "R5o3F", "name": "v5_p2", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "ya8yQ", "name": "v5_p2n", "fill": "#0EA5E9", "content": "02", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "XXyLI", "name": "v5_p2t", "fill": "#FFFFFF", "content": "Complexity is the enemy", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "pTuqs", "name": "v5_p2d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "If a feature requires a build step to exist, it doesn't belong in No.JS.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "tGgLm", "name": "v5_p3", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "cF2Pn", "name": "v5_p3n", "fill": "#0EA5E9", "content": "03", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "dyreJ", "name": "v5_p3t", "fill": "#FFFFFF", "content": "HTML-first, forever", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "L4kud", "name": "v5_p3d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "Every directive is an HTML attribute. Your templates are valid HTML that any browser can read.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "h8qKF", "name": "v5_p4", "width": "fill_container", "fill": "#0F172A", "stroke": { "thickness": 1, "fill": "#1E293B" }, "layout": "vertical", "gap": 12, "padding": 28, "children": [ { "type": "text", "id": "7YP95", "name": "v5_p4n", "fill": "#0EA5E9", "content": "04", "fontFamily": "Space Grotesk", "fontSize": 24, "fontWeight": "700" }, { "type": "text", "id": "CS7lB", "name": "v5_p4t", "fill": "#FFFFFF", "content": "Ship on day one", "fontFamily": "Space Grotesk", "fontSize": 18, "fontWeight": "600" }, { "type": "text", "id": "hUkac", "name": "v5_p4d", "fill": "#64748B", "textGrowth": "fixed-width", "width": "fill_container", "content": "The best framework is the one you can use right now, without asking permission from a terminal.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "SNsuo", "name": "Community Section", "width": "fill_container", "fill": "#F8FAFC", "layout": "vertical", "gap": 40, "padding": 80, "alignItems": "center", "children": [ { "type": "text", "id": "RhMro", "name": "comKicker", "fill": "#0EA5E9", "content": "OPEN SOURCE", "fontFamily": "Space Grotesk", "fontSize": 11, "fontWeight": "700", "letterSpacing": 4 }, { "type": "text", "id": "BB3JM", "name": "comH1", "fill": "#0F172A", "textGrowth": "fixed-width", "width": 700, "content": "Built in the open.\nPowered by the community.", "lineHeight": 1.2, "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold", "letterSpacing": -2 }, { "type": "text", "id": "Pqlxk", "name": "comSub", "fill": "#64748B", "textGrowth": "fixed-width", "width": 600, "content": "No.JS is free, MIT-licensed, and community-driven. Star us on GitHub, join the Discord, or contribute.", "textAlign": "center", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "normal" }, { "type": "frame", "id": "6897S", "name": "comLinks", "gap": 24, "alignItems": "center", "children": [ { "type": "frame", "id": "ZyQs9", "name": "ghBtn", "fill": "#0F172A", "cornerRadius": 8, "gap": 10, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "osMMk", "name": "ghIcon", "width": 20, "height": 20, "iconFontName": "github", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, { "type": "text", "id": "SUg0b", "name": "ghTxt", "fill": "#FFFFFF", "content": "Star on GitHub", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "600" } ] }, { "type": "frame", "id": "YwFiE", "name": "dcBtn", "cornerRadius": 8, "stroke": { "thickness": 1, "fill": "#CBD5E1" }, "gap": 10, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "sOizR", "name": "dcIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "#0F172A" }, { "type": "text", "id": "01xcE", "name": "dcTxt", "fill": "#0F172A", "content": "Join Discord", "fontFamily": "Space Grotesk", "fontSize": 15, "fontWeight": "500" } ] } ] } ] }, { "type": "frame", "id": "ONEDB", "name": "quote8", "width": "fill_container", "fill": "#F8FAFC", "stroke": { "thickness": 0 }, "padding": [ 80, 160 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "8NzRO", "name": "v5_quote_txt", "fill": "#0ea5e9", "textGrowth": "fixed-width", "width": 900, "content": "\"The best JavaScript\nis the JavaScript you don't write.\"", "lineHeight": 1.3, "textAlign": "center", "fontFamily": "Space Grotesk", "fontSize": 48, "fontWeight": "bold", "letterSpacing": -2 } ] }, { "id": "VaTm9", "type": "ref", "ref": "OIXap", "name": "ftr8", "width": "fill_container", "height": "fit_content", "y": 5320, "x": 0, "descendants": { "AaPSd": { "width": "fill_container", "height": "fit_content", "x": 80, "y": 40 }, "nUjGT": { "width": "fit_content", "height": "fit_content" }, "zgjuV": { "width": "fit_content", "height": "fit_content" }, "BlkH7": { "x": 36, "y": 1 }, "FySC8": { "y": 36 }, "ZI41K": { "x": 733, "y": 18, "width": "fit_content", "height": "fit_content" }, "lttC1": { "x": 90 }, "IYix0": { "x": 186 }, "oOPDf": { "x": 245 }, "YR8wf": { "x": 352 }, "8k7dI": { "x": 418 }, "LQsDT": { "x": 496 }, "KwKGc": { "width": "fill_container", "x": 80, "y": 125 }, "4zCTU": { "width": "fill_container", "x": 80, "y": 158, "height": "fit_content" }, "7LzA7": { "x": 1203 } } } ] } ] }