1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="icon" href="../favicon.svg" type="image/svg+xml" /> 6 <link rel="alternate icon" href="../favicon.png" /> 7 <meta name="theme-color" content="#F7F7F4" media="(prefers-color-scheme: light)" /> 8 <meta name="theme-color" content="#0C1620" media="(prefers-color-scheme: dark)" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1" /> 10 11 <link href="../_app/immutable/assets/0.CL-hgoyA.css" rel="stylesheet"> 12 <link href="../_app/immutable/assets/2.BfEdVTWj.css" rel="stylesheet"><!--[--><meta name="description" content="A drag-and-drop SaaS dashboard with an editable, responsive layout that persists between visits."/> <link rel="canonical" href="https://www.flexiboards.dev/examples/dashboard"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="Flexiboards"/> <meta property="og:title" content="Dashboard - Examples - Flexiboards"/> <meta property="og:description" content="A drag-and-drop SaaS dashboard with an editable, responsive layout that persists between visits."/> <meta property="og:url" content="https://www.flexiboards.dev/examples/dashboard"/><!--]--><!--[--><!--[!--><!--]--> <!---->
12<script>(function setInitialMode({ defaultMode = "system", themeColors: themeColors2, darkClassNames: darkClassNames2 = ["dark"], lightClassNames: lightClassNames2 = [], defaultTheme = "", modeStorageKey: modeStorageKey2 = "mode-watcher-mode", themeStorageKey: themeStorageKey2 = "mode-watcher-theme" }) { 13 const rootEl = document.documentElement; 14 const mode = localStorage.getItem(modeStorageKey2) || defaultMode; 15 const theme2 = localStorage.getItem(themeStorageKey2) || defaultTheme; 16 const light = mode === "light" || mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches; 17 if (light) { 18 if (darkClassNames2.length) 19 rootEl.classList.remove(...darkClassNames2); 20 if (lightClassNames2.length) 21 rootEl.classList.add(...lightClassNames2); 22 } else { 23 if (lightClassNames2.length) 24 rootEl.classList.remove(...lightClassNames2); 25 if (darkClassNames2.length) 26 rootEl.classList.add(...darkClassNames2); 27 } 28 rootEl.style.colorScheme = light ? "light" : "dark"; 29 if (themeColors2) { 30 const themeMetaEl = document.querySelector('meta[name="theme-color"]'); 31 if (themeMetaEl) { 32 themeMetaEl.setAttribute("content", mode === "light" ? themeColors2.light : themeColors2.dark); 33 } 34 } 35 if (theme2) { 36 rootEl.setAttribute("data-theme", theme2); 37 localStorage.setItem(themeStorageKey2, theme2); 38 } 39 localStorage.setItem(modeStorageKey2, mode); 40})({"defaultMode":"system","darkClassNames":["dark"],"lightClassNames":[],"defaultTheme":"","modeStorageKey":"mode-watcher-mode","themeStorageKey":"mode-watcher-theme"});</script>
40<!----><!--]--><!--[--><!--]--><title>Dashboard - Examples - Flexiboards</title> 41 42 <link rel="preconnect" href="https://fonts.googleapis.com" /> 43 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 44 <link 45 href="https://fonts.googleapis.com/css2?family=Domine:[email protected]&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" 46 rel="stylesheet" 47 /> 48 </head> 49 <body data-sveltekit-preload-data="hover" class="flex min-h-screen flex-col overscroll-none"> 50 <div style="display: contents"> 51 <div data-vaul-drawer-wrapper class="bg-background flex min-h-0 flex-1 flex-col"> 52 <!--[--><!--[--><!----><!--[!--><!--]--><!----> <!--[--><!----><div class="flex min-h-svh flex-col" style="--page-max: 100rem;"><header class="page-gutter border-rule bg-paper/95 h-15 sticky top-0 z-40 flex shrink-0 items-center justify-between border-b backdrop-blur-sm"><div class="flex items-center gap-8 lg:gap-11"><a class="flex items-center gap-3" href="/"><div class="flex flex-col items-start " style="gap:2px" aria-hidden="true"><!--[--><div class="bg-ink" style="height:4px; width:18px"></div><div class="bg-ink" style="height:4px; width:12px"></div><div class="bg-fx-accent" style="height:4px; width:6px"></div><!--]--></div><!----> <span class="font-serif text-[19px] font-semibold tracking-[-0.01em]">Flexiboards</span></a> <nav class="hidden items-center gap-6 lg:flex"><!--[--><a href="/docs" class="ui text-body hover:text-fx-accent border-b border-transparent pb-0.5 text-[13px] transition-colors duration-[120ms]">Docs</a><a href="/examples" class="ui hover:text-fx-accent border-b pb-0.5 text-[13px] transition-colors duration-[120ms] border-fx-accent text-ink">Examples</a><!--]--></nav></div> <div class="hidden items-center gap-3.5 lg:flex"><span class="text-body font-mono text-xs">v1.0</span> <!----><!----><!----><!--#s1--><!--[!--><button data-slot="dropdown-menu-trigger" class="focus-visible:ring-ring/50 aria-invalid:border-destructive ui inline-flex shrink-0 items-center justify-center whitespace-nowrap text-[13.5px] outline-none transition-[color,background-color,border-color,opacity,scale] duration-[130ms] ease-[cubic-bezier(0.25,0.8,0.25,1)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-safe:active:scale-[0.97] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border border-ink bg-transparent hover:bg-tint hover:text-ink gap-1.5 px-3 focus-visible:outline-ink h-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:ring-0" id="bits-s1" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-dropdown-menu-trigger="" type="button"><span class="flex size-5 items-center justify-center rounded-[5px] text-white" aria-hidden="true" style="background: #ff3e00;"><!----><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><title>siSvelte</title><path d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"></path></svg><!----></span> <span>Svelte</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-down size-3.5" aria-hidden="true"><!--[--><!----><path d="m6 9 6 6 6-6"><!----></path><!----><!--]--><!----><!----><!----><!----></svg><!----><!----></button><!--]--><!----><!----><!----> <!----><!----><!--[!--><!--]--><!----><!----><!----><!----><!----><!----> <!--[--><a data-slot="button" class="focus-visible:ring-ring/50 aria-invalid:border-destructive ui inline-flex shrink-0 items-center justify-center whitespace-nowrap text-[13.5px] outline-none transition-[color,background-color,border-color,opacity,scale] duration-[130ms] ease-[cubic-bezier(0.25,0.8,0.25,1)] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-safe:active:scale-[0.97] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border border-ink bg-transparent hover:bg-tint hover:text-ink gap-1.5 px-3 h-10" href="https://github.com/blakintosh/svelte-flexiboards" target="_blank"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="size-3.5"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg> <!--[!--><!--]--> <span class="sr-only">Star on GitHub</span><!----></a>
52<!--]--><!----> <!----><!--#s2--><!--[!--><button data-slot="dropdown-menu-trigger" class="focus-visible:ring-ring/50 aria-invalid:border-destructive ui inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap text-[13.5px] outline-none transition-[color,background-color,border-color,opacity,scale] duration-[130ms] ease-[cubic-bezier(0.25,0.8,0.25,1)] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-safe:active:scale-[0.97] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border border-ink bg-transparent hover:bg-tint hover:text-ink size-9 focus-visible:outline-ink relative size-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:ring-0" id="bits-s2" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-dropdown-menu-trigger="" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-theme-icon="true" aria-hidden="true" class="lucide-icon lucide lucide-sun size-4 rotate-0 opacity-100 transition-[transform,opacity] duration-150 motion-reduce:transition-none dark:-rotate-90 dark:opacity-0"><!--[--><!----><circle cx="12" cy="12" r="4"><!----></circle><!----><!----><path d="M12 2v2"><!----></path><!----><!----><path d="M12 20v2"><!----></path><!----><!----><path d="m4.93 4.93 1.41 1.41"><!----></path><!----><!----><path d="m17.66 17.66 1.41 1.41"><!----></path><!----><!----><path d="M2 12h2"><!----></path><!----><!----><path d="M20 12h2"><!----></path><!----><!----><path d="m6.34 17.66-1.41 1.41"><!----></path><!----><!----><path d="m19.07 4.93-1.41 1.41"><!----></path><!----><!--]--><!----><!----><!----><!----></svg><!----> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-theme-icon="true" aria-hidden="true" class="lucide-icon lucide lucide-moon absolute size-4 rotate-90 opacity-0 transition-[transform,opacity] duration-150 motion-reduce:transition-none dark:rotate-0 dark:opacity-100"><!--[--><!----><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"><!----></path><!----><!--]--><!----><!----><!----><!----></svg><!----> <span class="sr-only">Toggle theme</span><!----></button><!--]--><!----><!----><!----> <!----><!--[!--><!--]--><!----><!----><!----><!----><!----></div> <div class="flex items-center gap-1 lg:hidden"><span class="text-body mr-2 font-mono text-xs">v1.0</span> <!----><!--#s3--><!--[!--><button data-slot="dropdown-menu-trigger" class="focus-visible:ring-ring/50 aria-invalid:border-destructive ui inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap text-[13.5px] outline-none transition-[color,background-color,border-color,opacity,scale] duration-[130ms] ease-[cubic-bezier(0.25,0.8,0.25,1)] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-safe:active:scale-[0.97] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border border-ink bg-transparent hover:bg-tint hover:text-ink size-9 focus-visible:outline-ink relative size-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:ring-0" id="bits-s3" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-dropdown-menu-trigger="" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-theme-icon="true" aria-hidden="true" class="lucide-icon lucide lucide-sun size-4 rotate-0 opacity-100 transition-[transform,opacity] duration-150 motion-reduce:transition-none dark:-rotate-90 dark:opacity-0"><!--[--><!----><circle cx="12" cy="12" r="4"><!----></circle><!----><!----><path d="M12 2v2"><!----></path><!----><!----><path d="M12 20v2"><!----></path><!----><!----><path d="m4.93 4.93 1.41 1.41"><!----></path><!----><!----><path d="m17.66 17.66 1.41 1.41"><!----></path><!----><!----><path d="M2 12h2"><!----></path><!----><!----><path d="M20 12h2"><!----></path><!----><!----><path d="m6.34 17.66-1.41 1.41"><!----></path><!----><!----><path d="m19.07 4.93-1.41 1.41"><!----></path><!----><!--]--><!----><!----><!----><!----></svg><!----> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-theme-icon="true" aria-hidden="true" class="lucide-icon lucide lucide-moon absolute size-4 rotate-90 opacity-0 transition-[transform,opacity] duration-150 motion-reduce:transition-none dark:rotate-0 dark:opacity-100"><!--[--><!----><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"><!----></path><!----><!--]--><!----><!----><!----><!----></svg><!----> <span class="sr-only">Toggle theme</span><!----></button><!--]--><!----><!----><!----> <!----><!--[!--><!--]--><!----><!----><!----><!----><!----> <!----><!----><!----><!----><!----><!--#s4--><!--[!--><button data-slot="drawer-trigger" class="focus-visible:ring-ring/50 aria-invalid:border-destructive ui inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap text-[13.5px] outline-none transition-[color,background-color,border-color,opacity,scale] duration-[130ms] ease-[cubic-bezier(0.25,0.8,0.25,1)] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-safe:active:scale-[0.97] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 text-body hover:bg-tint hover:text-ink size-9" id="bits-s4" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-menu"><!--[--><!----><line x1="4" x2="20" y1="12" y2="12"><!----></line><!----><!----><line x1="4" x2="20" y1="6" y2="6"><!----></line><!----><!----><line x1="4" x2="20" y1="18" y2="18"><!----></line><!----><!--]--><!----><!----><!----><!----></svg><!----> <span class="sr-only">Open navigation</span><!----></button><!--]--><!----><!----> <!----><!----><!----><!--[!--><!--]--><!----><!----><!----><!----><!----><!----><!----></div></header><!----> <main class="flex min-h-0 flex-1 flex-col px-4 lg:px-8" id="main-content"><!--[--><!----><div class="mx-auto flex w-full max-w-[100rem] flex-1 gap-7 py-8"><aside class="hidden w-[212px] shrink-0 flex-col gap-6 lg:flex"><div class="flex flex-col gap-1.5"><span class="label text-fx-accent text-[11px]">Examples</span> <h1 class="text-ink m-0 font-serif text-2xl font-semibold leading-[1.15]">Flexiboards in action</h1> <p class="text-faint m-0 text-[12.5px] leading-[1.55]">Twelve boards, each running the real library.</p></div> <!--[--><nav class="flex flex-col gap-1" aria-label="Free grid"><span class="text-faint px-2.5 pb-1 text-[11px] font-bold">Free grid</span> <!--[--><a href="/examples/dashboard" aria-current="page" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] bg-panel border-rule-soft text-ink border font-bold shadow-[0_1px_3px_rgba(16,32,46,0.06)]">Dashboard <!--[--><span class="bg-fx-accent size-1.5 rounded-full"></span><!--]--></a><a href="/examples/notes" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Notes <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/flexspressive" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Flexspressive <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/numbers" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Numbers <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/gallery" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Gallery <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/launcher" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Launcher <!--[!--><!--[!--><!--]--><!--]--></a>
52<!--]--></nav><nav class="flex flex-col gap-1" aria-label="Flow"><span class="text-faint px-2.5 pb-1 text-[11px] font-bold">Flow</span> <!--[--><a href="/examples/products" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Products <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/flow" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Flow <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/kanban" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Kanban <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/form-builder" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Form Builder <!--[!--><!--[!--><!--]--><!--]--></a><a href="/examples/playlist" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Playlist <!--[!--><!--[!--><!--]--><!--]--></a><!--]--></nav><nav class="flex flex-col gap-1" aria-label="Nested"><span class="text-faint px-2.5 pb-1 text-[11px] font-bold">Nested</span> <!--[--><a href="/examples/compound" class="flex items-center justify-between rounded-[10px] px-3 py-[7px] text-[13px] transition-colors duration-[120ms] text-body hover:bg-rule-faint hover:text-ink font-semibold">Compound <!--[!--><!--[!--><!--]--><!--]--></a><!--]--></nav><!--]--></aside> <div class="flex min-w-0 flex-1 flex-col"><div class="border-rule-soft bg-panel shadow-card-lg flex flex-1 flex-col overflow-hidden rounded-[16px] border"><div class="border-rule-faint flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-b px-4 py-3 lg:px-[18px]"><div class="lg:hidden"><!----><!----><!----><!--#s5--><!--[--><!--[!--><button data-slot="dropdown-menu-trigger" class="focus-visible:ring-ring/50 aria-invalid:border-destructive ui inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap text-[13.5px] outline-none transition-[color,background-color,border-color,opacity,scale] duration-[130ms] ease-[cubic-bezier(0.25,0.8,0.25,1)] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-safe:active:scale-[0.97] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border border-ink bg-transparent hover:bg-tint hover:text-ink h-11 px-5 py-3 rounded-full" type="button" id="bits-s5" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-dropdown-menu-trigger=""><!---->Dashboard <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-down ml-1 size-4"><!--[--><!----><path d="m6 9 6 6 6-6"><!----></path><!----><!--]--><!----><!----><!----><!----></svg><!----><!----></button><!--]--><!----><!--]--><!----><!----><!----> <!----><!----><!--[!--><!--]--><!----><!----><!----><!----><!----></div> <span class="text-body [&_a]:border-rule-soft [&_a]:text-ink [&_a:hover]:border-fx-accent [&_a:hover]:text-fx-accent hidden min-w-0 text-[13px] lg:inline [&_a]:border-b"><!----><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ff3e00" viewBox="0 0 24 24" class="mr-1.5 inline-block align-[-5px] " aria-label="Svelte example"><title>siSvelte</title><path d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"></path></svg><!----> <strong class="text-ink font-bold">Dashboard</strong> <span aria-hidden="true">â</span> <!---->A drag-and-drop SaaS dashboard with an editable, responsive layout that persists between visits.<!----></span> <span class="flex shrink-0 items-center gap-2.5"><span class="text-faint/70 hidden font-mono text-[11px] md:inline">desktop · fluid</span> <span class="bg-stage hidden items-center gap-0.5 rounded-full p-[3px] lg:flex"><!--[--><button type="button" class="flex h-[26px] w-[30px] cursor-pointer items-center justify-center rounded-full border-none transition-colors duration-[120ms] bg-panel shadow-seg text-ink" aria-label="Desktop view" aria-pressed="true"><!----><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-monitor size-3.5"><!--[--><!----><rect width="20" height="14" x="2" y="3" rx="2"><!----></rect><!----><!----><line x1="8" x2="16" y1="21" y2="21"><!----></line><!----><!----><line x1="12" x2="12" y1="17" y2="21"><!----></line><!----><!--]--><!----><!----><!----><!----></svg><!----></button><button type="button" class="flex h-[26px] w-[30px] cursor-pointer items-center justify-center rounded-full border-none transition-colors duration-[120ms] text-faint hover:text-ink bg-transparent" aria-label="Tablet view" aria-pressed="false"><!----><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-tablet size-3.5"><!--[--><!----><rect width="16" height="20" x="4" y="2" rx="2" ry="2"><!----></rect><!----><!----><line x1="12" x2="12.01" y1="18" y2="18"><!----></line><!----><!--]--><!----><!----><!----><!----></svg><!----></button><button type="button" class="flex h-[26px] w-[30px] cursor-pointer items-center justify-center rounded-full border-none transition-colors duration-[120ms] text-faint hover:text-ink bg-transparent" aria-label="Mobile view" aria-pressed="false"><!----><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-smartphone size-3.5"><!--[--><!----><rect width="14" height="20" x="5" y="2" rx="2" ry="2"><!----></rect><!----><!----><path d="M12 18h.01"><!----></path><!----><!--]--><!----><!----><!----><!----></svg><!----></button><!--]--></span> <a href="https://github.com/Blakintosh/svelte-flexiboards/tree/main/site/src/lib/components/examples/pages" target="_blank" rel="noopener noreferrer" class="border-rule-soft text-body hover:bg-rule-faint inline-flex h-[30px] items-center rounded-full border px-[13px] text-xs font-semibold transition-colors duration-[120ms]">View source</a></span></div> <div class="border-rule-faint flex flex-wrap items-center gap-1.5 border-b px-4 py-2 lg:px-[18px] xl:hidden"><span class="text-faint mr-1 text-[11px] font-bold">Features</span> <!--[--><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Free grid</button> <!--[--><a href="/docs/free-form-grids" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Free grid" aria-label="Docs: Free grid">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Widget registry</button> <!--[--><a href="/docs/widget-rendering" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Widget registry" aria-label="Docs: Widget registry">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Grab handles</button> <!--[--><a href="/docs/components/widget" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Grab handles" aria-label="Docs: Grab handles">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Resizing</button> <!--[--><a href="/docs/components/widget" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Resizing" aria-label="Docs: Resizing">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Edit mode</button> <!--[--><a href="/docs/configuration" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Edit mode" aria-label="Docs: Edit mode">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Widget metadata</button> <!--[--><a href="/docs/widget-rendering" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Widget metadata" aria-label="Docs: Widget metadata">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Stored layouts</button> <!--[--><a href="/docs/guides/exporting-importing-boards" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Stored layouts" aria-label="Docs: Stored layouts">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Responsive layouts</button> <!--[--><a href="/docs/guides/responsive-layouts" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Responsive layouts" aria-label="Docs: Responsive layouts">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Simple transitions</button> <!--[--><a href="/docs/transitions" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Simple transitions" aria-label="Docs: Simple transitions">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Client-side rendering</button> <!--[--><a href="/docs/guides/server-side-rendering" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Client-side rendering" aria-label="Docs: Client-side rendering">â</a><!--]--></span><!--]--></div> <div class="bg-stage flex min-h-[560px] flex-1 justify-center"><div class="ease-snap bg-paper relative h-full min-h-[560px] max-w-full transition-[width] duration-300 motion-reduce:transition-none " aria-busy="true" style="width: 100%;"><!----><iframe src="/embed/svelte/dashboard" title="Dashboard example" class="h-full min-h-[560px] w-full invisible" inert onerror="this.__e=event"></iframe><!----> <!--[--><div class="bg-paper absolute inset-0 grid place-content-center gap-5 p-6 sm:p-10"><!--[--><div role="status" class="mx-auto flex min-h-40 w-full max-w-md flex-col justify-center gap-5"><div aria-hidden="true" class="space-y-3"><div class="bg-rule h-2 w-1/3"></div> <div class="grid grid-cols-2 gap-3"><!--[--><div class="border-rule bg-panel h-16 border sm:h-20"></div><div class="border-rule bg-panel h-16 border sm:h-20"></div><div class="border-rule bg-panel h-16 border sm:h-20"></div><div class="border-rule bg-panel h-16 border sm:h-20"></div><!--]--></div></div> <p class="text-body m-0 text-center text-sm">Loading dashboard exampleâ¦</p></div><!----> <!--[!--><!--]--><!--]--> <!--[!--><!--]--></div><!--]--></div><!----></div></div></div> <aside class="hidden w-[200px] shrink-0 flex-col gap-5 xl:flex" aria-label="Features used"><div class="flex flex-col gap-2"><span class="font-serif text-[16px] font-bold">Features used</span> <p class="text-faint m-0 text-[13px] leading-[1.5]">Press one to flag other examples that use it, or navigate to the related guide if available.</p></div> <!--[--><!--[--><div class="flex flex-col gap-1.5"><span class="text-faint text-[10.5px] font-semibold uppercase tracking-[0.04em]">Layout</span> <div class="flex flex-wrap gap-1.5"><!--[--><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Free grid</button> <!--[--><a href="/docs/free-form-grids" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Free grid" aria-label="Docs: Free grid">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Widget registry</button> <!--[--><a href="/docs/widget-rendering" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline"
52title="Read the docs for Widget registry" aria-label="Docs: Widget registry">â</a><!--]--></span><!--]--></div></div><!--]--><!--[--><div class="flex flex-col gap-1.5"><span class="text-faint text-[10.5px] font-semibold uppercase tracking-[0.04em]">Interaction</span> <div class="flex flex-wrap gap-1.5"><!--[--><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Grab handles</button> <!--[--><a href="/docs/components/widget" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Grab handles" aria-label="Docs: Grab handles">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Resizing</button> <!--[--><a href="/docs/components/widget" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Resizing" aria-label="Docs: Resizing">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Edit mode</button> <!--[--><a href="/docs/configuration" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Edit mode" aria-label="Docs: Edit mode">â</a><!--]--></span><!--]--></div></div><!--]--><!--[--><div class="flex flex-col gap-1.5"><span class="text-faint text-[10.5px] font-semibold uppercase tracking-[0.04em]">State</span> <div class="flex flex-wrap gap-1.5"><!--[--><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Widget metadata</button> <!--[--><a href="/docs/widget-rendering" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Widget metadata" aria-label="Docs: Widget metadata">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Stored layouts</button> <!--[--><a href="/docs/guides/exporting-importing-boards" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Stored layouts" aria-label="Docs: Stored layouts">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Responsive layouts</button> <!--[--><a href="/docs/guides/responsive-layouts" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Responsive layouts" aria-label="Docs: Responsive layouts">â</a><!--]--></span><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Client-side rendering</button> <!--[--><a href="/docs/guides/server-side-rendering" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Client-side rendering" aria-label="Docs: Client-side rendering">â</a><!--]--></span><!--]--></div></div><!--]--><!--[--><div class="flex flex-col gap-1.5"><span class="text-faint text-[10.5px] font-semibold uppercase tracking-[0.04em]">Motion</span> <div class="flex flex-wrap gap-1.5"><!--[--><span class="inline-flex items-stretch overflow-hidden rounded-full border text-[11.5px] font-semibold transition-colors duration-[120ms] border-rule-soft bg-panel text-body"><button type="button" aria-pressed="false" class="hover:bg-rule-faint cursor-pointer px-2.5 py-1">Simple transitions</button> <!--[--><a href="/docs/transitions" class="border-rule-faint hover:text-fx-accent flex items-center border-l px-1.5 no-underline" title="Read the docs for Simple transitions" aria-label="Docs: Simple transitions">â</a><!--]--></span><!--]--></div></div><!--]--><!--]--></aside></div> <!----><!----><!----><!----><!--]--><!----></main> <footer class="border-rule bg-paper border-t"><div class="page-gutter text-body grid grid-cols-[repeat(auto-fit,minmax(min(100%,200px),1fr))] gap-8 py-12 text-[13.5px]"><div><div class="mb-2.5 flex items-center gap-2.5"><div class="flex flex-col items-start " style="gap:2px" aria-hidden="true"><!--[--><div class="bg-ink" style="height:4px; width:18px"></div><div class="bg-ink" style="height:4px; width:12px"></div><div class="bg-fx-accent" style="height:4px; width:6px"></div><!--]--></div><!----> <span class="text-ink font-serif text-base">Flexiboards</span></div> <p class="m-0 max-w-[34ch] leading-relaxed">A headless drag-and-drop grids library. We'll bring the grid, you bring the style.</p></div> <!--[--><div><b class="label text-faint mb-2.5 block text-[11px] tracking-[0.12em]">Docs</b> <div class="flex flex-col gap-1.5"><!--[--><a href="/docs/overview" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">Overview</a><a href="/docs/free-form-grids" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">Free-form grids</a><a href="/docs/flow-grids" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">Flow grids</a><a href="/docs/configuration" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">Configuration</a><a href="/docs/transitions" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">Transitions</a>
52<!--]--></div></div><div><b class="label text-faint mb-2.5 block text-[11px] tracking-[0.12em]">Components</b> <div class="flex flex-col gap-1.5"><!--[--><a href="/docs/components/board" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">FlexiBoard</a><a href="/docs/components/target" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">FlexiTarget</a><a href="/docs/components/widget" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">FlexiWidget</a><a href="/docs/components/adder" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">FlexiAdd</a><a href="/docs/components/responsive-board" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">Responsive board</a><!--]--></div></div><div><b class="label text-faint mb-2.5 block text-[11px] tracking-[0.12em]">Project</b> <div class="flex flex-col gap-1.5"><!--[--><a href="https://github.com/Blakintosh/svelte-flexiboards" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]" target="_blank">GitHub</a><a href="https://www.npmjs.com/package/@flexiboards/svelte" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]" target="_blank">npm</a><a href="/examples" class="hover:text-fx-accent w-fit transition-colors duration-[120ms]">Examples</a><!--]--></div></div><!--]--></div> <div class="page-gutter label border-rule text-faint flex flex-wrap items-center justify-between gap-3 border-t py-4 text-[10px]"><span>MIT licensed</span> <span class="normal-case tracking-normal">Made by <a href="https://github.com/Blakintosh" class="text-body hover:text-fx-accent transition-colors duration-[120ms]" target="_blank">Blakintosh</a></span></div></footer></div><!----><!--]--><!----><!----><!--]--> <!--[!--><!--]--><!--]--> 53 54
54<script> 55 { 56 __sveltekit_r64pwx = { 57 base: new URL("..", location).pathname.slice(0, -1) 58 }; 59 60 const element = document.currentScript.parentElement; 61 62 Promise.all([ 63 import("../_app/immutable/entry/start.CX84Ih2U.js"), 64 import("../_app/immutable/entry/app.bVPAGoyX.js") 65 ]).then(([kit, app]) => { 66 kit.start(app, element, { 67 node_ids: [0, 2, 4, 11], 68 data: [{"type":"data","data":{siteOrigin:"https://www.flexiboards.dev",framework:null,packageManager:null},"uses":{}},null,null,null], 69 form: null, 70 error: null 71 }); 72 }); 73 } 74 </script>
74 75 76 </div> 77 </div> 78 </body> 79</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.