Datasette Apps: Host custom HTML applications inside Datasette

18th June 2026
Today we launched a new plugin for Datasette, datasette-apps, with this launch announcement post on the Datasette project blog. That post has the what, but I’m going to expand on that a little bit here to provide the why.
The TL;DR
Datasette Apps are self-contained HTML+JavaScript applications that run in a tightly constrained <br>sandbox hosted on your Datasette application. They can use JavaScript to run read-only SQL queries against data in Datasette, and can run write queries too if you configure them with some stored queries.<br>Here’s a very simple example and a more complex custom timeline example—the latter looks like this:<br>Apps are allowed to run JavaScript and render HTML and CSS. They are limited in terms of access—the <iframe sandbox="allow-scripts allow-forms"><br>they run in prevents them from accessing cookies or localStorage and they also have an injected CSP header (thanks to this research) which prevents them from making HTTP requests to outside hosts, preventing a malicious or buggy app from exfiltrating private data.<br>Datasette Apps started out as my attempt at building a Claude Artifacts mechanism for Datasette Agent, but I quickly realised that the sandboxed pattern is interesting for way more than just adding custom apps in a chat interface and promoted it to its own top-level concept within the Datasette ecosystem.<br>They’re also a fun way to turn my multi-year experiment in vibe-coded HTML tools into a core feature of my main project!<br>You can try out Datasette Apps by signing in with GitHub to the agent.datasette.io demo instance.<br>Why build this?<br>Since the very first release, Datasette has offered a flexible backend for creating custom HTML apps via its JSON API.<br>One of my earliest Datasette projects was an internal search engine for documentation when I worked at Eventbrite—it worked by importing documents from different systems into SQLite on a cron and then serving them through a Datasette instance with a custom HTML+JavaScript search interface that directly queried the Datasette API.<br>I had client-side JavaScript constructing SQL queries, which originally was intended as an engineering joke but turned out to be a really productive way of iterating on the app!<br>That project, combined with my experience building my HTML tools collection and my experiments with Claude Artifacts, has convinced me that adding a Datasette-style backend to a self-contained HTML frontend is an astonishingly powerful combination.<br>Imagine how much more useful Claude Artifacts could be if they had access to a persistent relational database. That’s what I’m building with Datasette Apps!<br>Neat ideas in Datasette Apps<br>Here are a few of the ideas and patterns I’ve figured out building this which I think have staying power.<br><iframe sandbox="allow-scripts" srcdoc="..."><br>+ <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:;"><br>This is the magic combination that makes Datasette Apps feasible in the first place. I need to run untrusted HTML and JavaScript on a highly sensitive domain—an authenticated Datasette instance can contain all sorts of private data. The sandbox=<br>attribute lets me run that untrusted code in a way that cannot interact with the parent application—it can’t read the DOM, or access cookies, or steal secrets from localStorage<br>. It can however use fetch()<br>and friends to load content (or exfiltrate data) from other domains. But... it turns out if you start an HTML page with a <meta http-equiv="Content-Security-Policy"><br>header you can set additional policies that lock down access to other domains. I was worried that malicious JavaScript would be able to update or remove that header but it turns out that doesn’t work—once set, the CSP policy is immutable for the content of that frame.<br>Locked down APIs with postMessage()<br>and MessageChannel()<br>Having locked down those iframes to the point that they couldn’t do anything interesting at all, the challenge was to open them back again such that they could run an allow-list of operations, starting with read-only SQL queries against specified databases.<br>I built the first version of this with postMessage()<br>, which allows a child iframe to send messages to the parent window. I created a simple protocol for requesting that the parent run a SQL query—the parent could then verify it was against an allow-listed database before executing it.<br>One of the LLM tools, I think it was GPT-5.5, suggested that postMessage()<br>on its own can be exploited if the iframe somehow loads additional code from an untrusted domain. I don’t think that applies to Datasette Apps, but I also believe in defense in depth, so I had GPT-5.5 help me port to a MessageChannel() based transport instead.<br>MessageChannel()<br>has the advantage that if a page navigates to somewhere else the channel closes automatically, removing any chance of executing commands sent from an untrusted external page.<br>Visible logs, for queries and errors<br>If you navigate to the timeline demo and search for the string usercontent<br>you’ll pull in some search results that embed images from the user-images.githubusercontent.com<br>domain. This domain is not in the CSP allow-list, so it trips an error.<br>Those errors are captured and transmitted back to the parent frame, where they can be displayed in a useful error log. This is meant to make hacking on apps more productive by surfacing otherwise-invisible problems.<br>I built an experiment demonstrating that you can even turn this into a one-click-to-allow mechanism for building the CSP allow-list based on what breaks, but I haven’t integrated that idea into datasette-apps<br>just yet.<br>SQL queries are also visibly logged—scroll to the bottom of the timeline page to see that in action.<br>Stored queries for write operations<br>I want apps to be able to conditionally write to the database, but this is an even more dangerous proposition than SQL reads!<br>My solution involves Datasette’s stored queries feature, rebranded from “canned queries” and given a major upgrade in the recent Datasette 1.0a31—work that was directly inspired by Datasette Apps.<br>Users can create a stored write query that performs an insert or update, then allow-list that specific query for an app to use. Usage from code inside an app looks like this:<br>const result = await datasette.storedQuery("todos", "add_todo", {<br>title: "Buy milk",<br>due_date: "2026-06-20",<br>priority: "high",<br>completed: false<br>});<br>I’m only just beginning to explore the possibilities this unlocks myself, but my goal is to support full read-write applications built safely as Datasette Apps.<br>Copy and paste a prompt to build an app<br>The Datasette Apps plugin has no dependency on LLMs at all, but these self-contained apps are the perfect shape to be written by a modern LLM.<br>The create app form includes a copyable prompt at the end. This prompt has everything a model needs to know to build a new app, including the schema of any selected databases.<br>This means you can click “copy”, paste it into ChatGPT or Claude or Gemini, tell it what you need, and there’s a good chance the model will spit out the code necessary to build the app.<br>If you have Datasette Agent installed your AI assistant will also gain tools to both create new apps and edit existing ones, Claude Artifacts style.<br>Built with so much AI assistance<br>Datasette Apps started life back in April as datasette-agent-artifacts, a plugin I have since renamed to datasette-agent-edit<br>keeping only its editing tools. I built that as one of the first plugins for Datasette Agent, to help get the plugin hooks into the right shape. That first prototype was mainly built using Claude Opus 4.6 in Claude Code.<br>When I switched track to Datasette Apps I started with a plan constructed using Codex Desktop and GPT-5.5 xhigh, based on extensive dialog and feeding in both datasette-agent-artifacts<br>and other prototypes I had built.<br>Most of the work that followed stuck with Codex, but in the few short days that we had access to Claude Fable 5 I had it run a security evaluation of the product (an ability that would get it banned by the US government shortly afterwards) and it found a very real problem.<br>I was allowing users to allow-list CSP hosts for their apps, but Fable pointed out the following attack:<br>- A less privileged user with<br>create-app<br>permission creates an app that queries SQLite for all available tables and selects and exfiltrates all of the data to a host they had allow-listed via CSP. - They then trick an administrator user with access to private data into visiting their app.<br>- ... and the app can now run queries as that user and steal their private data!<br>That’s clearly unacceptable. I fixed it by restricting the ability to allow-list any domain to a new apps-set-csp<br>permission, which is intended just for trusted staff. Site administrators can also configure Datasette with a list of allowed_csp_origins<br>, which regular users can then select. This means you can do things like allow cdnjs.cloudflare.com<br>and your users will be able to build apps that load extra JavaScript libraries from the cdnjs CDN.<br>I’ve reviewed Datasette Apps extremely closely, especially the security-adjacent parts of it. The critical sandbox and CSP configuration are based on multiple AI-assisted prototypes and tests.<br>It’s looking good so far<br>I’m really pleased with this initial release.<br>Datasette is growing beyond its origins as an application for serving read-only data into a much richer ecosystem of tools for doing useful things with that data once it has been collected.<br>Datasette’s roots are in data journalism. I’ve always been interested in the question of what comes next after a journalist gets their hands on a giant dump of data about the world. Datasette supports exploring and publishing it. Datasette Agent adds interrogating it with AI assistance. Now Datasette Apps expands that to building custom interfaces and visualizations to help unlock the stories that are hidden within.</p></div></div></div><div class="border-t border-slate-800"><div class="w-full flex items-center px-4 sm:px-8 py-5"><div class="flex items-center gap-3"><div aria-hidden="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 lucide-scan-line h-4 w-4 text-slate-500" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path><path d="M7 12h10"></path></svg></div><h3 class="font-sans text-xs uppercase tracking-[0.25em] font-semibold text-slate-300">Sentinel — Human</h3></div></div><div id="9c71a47352fbe0c808b918f2a60e0fea-sentinel-content" class="px-4 sm:px-8 pb-6 pt-0"><div class="space-y-5"><div class="flex items-center gap-3"><span class="font-sans text-[10px] uppercase tracking-[0.2em] text-slate-500 w-24 shrink-0" id="9c71a47352fbe0c808b918f2a60e0fea-conf-label">Confidence</span><div class="flex-1 h-px bg-slate-800 overflow-hidden"><div role="progressbar" aria-labelledby="9c71a47352fbe0c808b918f2a60e0fea-conf-label" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" class="h-full bg-slate-300 transition-all duration-500" style="width:15%"></div></div><span class="font-mono text-xs font-semibold text-slate-300" aria-hidden="true">15%</span></div><p class="font-serif text-slate-200 leading-relaxed">The text displays strong indicators of human authorship due to personalized experience, idiosyncratic emphasis, and deep, nuanced technical reflection on security tradeoffs, which are characteristic of an expert developer documenting their process.</p></div></div></div><div class="px-4 sm:px-8 pb-8 pt-6 border-t border-slate-800"><section aria-label="Comments" class="border-t border-slate-700/50 pt-6"><div class="flex items-center justify-between mb-4"><button aria-expanded="false" aria-controls="comment-thread" class="flex items-center gap-2 text-slate-300 hover:text-amber-300 transition-colors group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400/50 rounded"><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 lucide-message-square h-5 w-5 group-hover:scale-110 transition-transform" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><span class="font-medium">1 Comment</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 lucide-chevron-down h-4 w-4 ml-1 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></div></section></div><div class="border-t border-slate-800" aria-hidden="true"></div><footer class="flex justify-between items-center px-4 sm:px-8 py-5 font-sans text-[10px] uppercase tracking-[0.25em] text-slate-500"><time dateTime="2026-06-30T13:59:32.883583+00:00">Jun 30, 2026, 01:59 PM</time><a class="font-semibold text-slate-500 hover:text-slate-200 transition-colors duration-200" aria-label="View Peer-Reviewed Science and Research in wiki" href="/wiki/peer-reviewed-science-and-research">Peer-Reviewed Science and Research</a></footer></div></article></article><footer class="h-24 flex items-center justify-center opacity-20 print:hidden"><div class="w-0.5 bg-gradient-to-b from-amber-500 to-transparent h-full rounded-full"></div></footer></main></div></div></main></div><script src="/_next/static/chunks/5c75c4cc39fc4c35.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[75995,[\"/_next/static/chunks/aea1cd1d556fc828.js\",\"/_next/static/chunks/6e1cb0e67c014159.js\",\"/_next/static/chunks/7476f5a12b25079b.js\",\"/_next/static/chunks/38c07ebfee01469f.js\"],\"default\"]\n3:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"default\"]\n5:I[22016,[\"/_next/static/chunks/aea1cd1d556fc828.js\",\"/_next/static/chunks/6e1cb0e67c014159.js\",\"/_next/static/chunks/7476f5a12b25079b.js\",\"/_next/static/chunks/38c07ebfee01469f.js\",\"/_next/static/chunks/ee81b3a743c1f464.js\",\"/_next/static/chunks/b3d88ca2de964433.js\"],\"\"]\n6:I[30679,[\"/_next/static/chunks/aea1cd1d556fc828.js\",\"/_next/static/chunks/6e1cb0e67c014159.js\",\"/_next/static/chunks/7476f5a12b25079b.js\",\"/_next/static/chunks/38c07ebfee01469f.js\"],\"default\"]\n8:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"OutletBoundary\"]\n9:\"$Sreact.suspense\"\nb:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"ViewportBoundary\"]\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"MetadataBoundary\"]\nf:I[68027,[],\"default\"]\n:HL[\"/_next/static/chunks/9240889730a9800c.css\",\"style\"]\n:HL[\"/_next/static/chunks/b39bf727fa541f2a.css\",\"style\"]\n:HL[\"/_next/static/chunks/283405d20c3fbb34.css\",\"style\"]\n:HL[\"/_next/static/media/1bc7fc94203521e3-s.p.888a2ca8.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/216579b50e548914-s.p.a1b609f7.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"l_XKeYqwAl9T9-AIt40pb\",\"c\":[\"\",\"article\",\"9c71a47352fbe0c808b918f2a60e0fea\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"article\",{\"children\":[[\"slug\",\"9c71a47352fbe0c808b918f2a60e0fea\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9240889730a9800c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/b39bf727fa541f2a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/283405d20c3fbb34.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/aea1cd1d556fc828.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/6e1cb0e67c014159.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/7476f5a12b25079b.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/38c07ebfee01469f.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"dark\",\"children\":[\"$\",\"body\",null,{\"className\":\"ubuntu_50dd732-module__i6I9QW__variable\",\"children\":[[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"style\":{\"display\":\"none\"},\"dangerouslySetInnerHTML\":{\"__html\":\"\u003c!-- 404: Not Found --\u003e\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebPage\\\",\\\"name\\\":\\\"404 Not Found\\\",\\\"description\\\":\\\"The requested page could not be found on Arc Codex.\\\"}\"}}],[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center justify-center min-h-[60vh] px-4 text-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-7xl font-black text-slate-200 mb-4\",\"children\":\"404\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-400 mb-8\",\"children\":\"The page you requested could not be found.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-4\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"px-5 py-2.5 rounded-xl bg-white/5 border border-white/10 text-slate-300 hover:text-white hover:border-white/20 transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400/50\",\"children\":\"Return to Feed\"}],[\"$\",\"$L5\",null,{\"href\":\"/wiki\",\"className\":\"px-5 py-2.5 rounded-xl bg-white/5 border border-white/10 text-slate-300 hover:text-white hover:border-white/20 transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400/50\",\"children\":\"Browse Wiki\"}]]}]]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L6\",null,{}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L7\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/ee81b3a743c1f464.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/b3d88ca2de964433.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@a\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Le\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#f59e0b\"}]]\n"])</script><script>self.__next_f.push([1,"10:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"IconMark\"]\na:null\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"title\",\"0\",{\"children\":\"Datasette Apps: Host custom HTML applications inside Datasette — Arc Codex\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Datasette Apps: Host custom HTML applications inside Datasette\\n18th June 2026\\nToday we launched a new plugin for Datasette, datasette-apps, with this launc\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://arc-codex.com/article/9c71a47352fbe0c808b918f2a60e0fea\"}],[\"$\",\"meta\",\"4\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"5\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Arc Codex\"}],[\"$\",\"meta\",\"6\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black-translucent\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Datasette Apps: Host custom HTML applications inside Datasette\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Datasette Apps: Host custom HTML applications inside Datasette\\n18th June 2026\\nToday we launched a new plugin for Datasette, datasette-apps, with this launc\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://arc-codex.com/article/9c71a47352fbe0c808b918f2a60e0fea\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"Arc Codex\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image\",\"content\":\"https://static.simonwillison.net/static/2026/datasette-apps-card.jpg\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:alt\",\"content\":\"Datasette Apps: Host custom HTML applications inside Datasette\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"16\",{\"property\":\"article:published_time\",\"content\":\"2026-06-30T13:59:32.883583+00:00\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Datasette Apps: Host custom HTML applications inside Datasette\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Datasette Apps: Host custom HTML applications inside Datasette\\n18th June 2026\\nToday we launched a new plugin for Datasette, datasette-apps, with this launc\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://static.simonwillison.net/static/2026/datasette-apps-card.jpg\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0b3bf435.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"23\",{\"rel\":\"apple-touch-icon\",\"href\":\"/icons/apple-touch-icon.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L10\",\"24\",{}]]\n"])</script><script>self.__next_f.push([1,"11:I[1509,[\"/_next/static/chunks/aea1cd1d556fc828.js\",\"/_next/static/chunks/6e1cb0e67c014159.js\",\"/_next/static/chunks/7476f5a12b25079b.js\",\"/_next/static/chunks/38c07ebfee01469f.js\",\"/_next/static/chunks/ee81b3a743c1f464.js\",\"/_next/static/chunks/b3d88ca2de964433.js\"],\"default\"]\n12:I[17642,[\"/_next/static/chunks/aea1cd1d556fc828.js\",\"/_next/static/chunks/6e1cb0e67c014159.js\",\"/_next/static/chunks/7476f5a12b25079b.js\",\"/_next/static/chunks/38c07ebfee01469f.js\",\"/_next/static/chunks/ee81b3a743c1f464.js\",\"/_next/static/chunks/b3d88ca2de964433.js\"],\"default\"]\n13:T27a6,"])</script><script>self.__next_f.push([1,"Datasette Apps: Host custom HTML applications inside Datasette\n18th June 2026\nToday we launched a new plugin for Datasette, datasette-apps, with this launch announcement post on the Datasette project blog. That post has the what, but I’m going to expand on that a little bit here to provide the why.\nThe TL;DR\nDatasette Apps are self-contained HTML+JavaScript applications that run in a tightly constrained \u003ciframe\u003e\nsandbox hosted on your Datasette application. They can use JavaScript to run read-only SQL queries against data in Datasette, and can run write queries too if you configure them with some stored queries.\nHere’s a very simple example and a more complex custom timeline example—the latter looks like this:\nApps are allowed to run JavaScript and render HTML and CSS. They are limited in terms of access—the \u003ciframe sandbox=\"allow-scripts allow-forms\"\u003e\nthey run in prevents them from accessing cookies or localStorage and they also have an injected CSP header (thanks to this research) which prevents them from making HTTP requests to outside hosts, preventing a malicious or buggy app from exfiltrating private data.\nDatasette Apps started out as my attempt at building a Claude Artifacts mechanism for Datasette Agent, but I quickly realised that the sandboxed pattern is interesting for way more than just adding custom apps in a chat interface and promoted it to its own top-level concept within the Datasette ecosystem.\nThey’re also a fun way to turn my multi-year experiment in vibe-coded HTML tools into a core feature of my main project!\nYou can try out Datasette Apps by signing in with GitHub to the agent.datasette.io demo instance.\nWhy build this?\nSince the very first release, Datasette has offered a flexible backend for creating custom HTML apps via its JSON API.\nOne of my earliest Datasette projects was an internal search engine for documentation when I worked at Eventbrite—it worked by importing documents from different systems into SQLite on a cron and then serving them through a Datasette instance with a custom HTML+JavaScript search interface that directly queried the Datasette API.\nI had client-side JavaScript constructing SQL queries, which originally was intended as an engineering joke but turned out to be a really productive way of iterating on the app!\nThat project, combined with my experience building my HTML tools collection and my experiments with Claude Artifacts, has convinced me that adding a Datasette-style backend to a self-contained HTML frontend is an astonishingly powerful combination.\nImagine how much more useful Claude Artifacts could be if they had access to a persistent relational database. That’s what I’m building with Datasette Apps!\nNeat ideas in Datasette Apps\nHere are a few of the ideas and patterns I’ve figured out building this which I think have staying power.\n\u003ciframe sandbox=\"allow-scripts\" srcdoc=\"...\"\u003e\n+ \u003cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:;\"\u003e\nThis is the magic combination that makes Datasette Apps feasible in the first place. I need to run untrusted HTML and JavaScript on a highly sensitive domain—an authenticated Datasette instance can contain all sorts of private data. The sandbox=\nattribute lets me run that untrusted code in a way that cannot interact with the parent application—it can’t read the DOM, or access cookies, or steal secrets from localStorage\n. It can however use fetch()\nand friends to load content (or exfiltrate data) from other domains. But... it turns out if you start an HTML page with a \u003cmeta http-equiv=\"Content-Security-Policy\"\u003e\nheader you can set additional policies that lock down access to other domains. I was worried that malicious JavaScript would be able to update or remove that header but it turns out that doesn’t work—once set, the CSP policy is immutable for the content of that frame.\nLocked down APIs with postMessage()\nand MessageChannel()\nHaving locked down those iframes to the point that they couldn’t do anything interesting at all, the challenge was to open them back again such that they could run an allow-list of operations, starting with read-only SQL queries against specified databases.\nI built the first version of this with postMessage()\n, which allows a child iframe to send messages to the parent window. I created a simple protocol for requesting that the parent run a SQL query—the parent could then verify it was against an allow-listed database before executing it.\nOne of the LLM tools, I think it was GPT-5.5, suggested that postMessage()\non its own can be exploited if the iframe somehow loads additional code from an untrusted domain. I don’t think that applies to Datasette Apps, but I also believe in defense in depth, so I had GPT-5.5 help me port to a MessageChannel() based transport instead.\nMessageChannel()\nhas the advantage that if a page navigates to somewhere else the channel closes automatically, removing any chance of executing commands sent from an untrusted external page.\nVisible logs, for queries and errors\nIf you navigate to the timeline demo and search for the string usercontent\nyou’ll pull in some search results that embed images from the user-images.githubusercontent.com\ndomain. This domain is not in the CSP allow-list, so it trips an error.\nThose errors are captured and transmitted back to the parent frame, where they can be displayed in a useful error log. This is meant to make hacking on apps more productive by surfacing otherwise-invisible problems.\nI built an experiment demonstrating that you can even turn this into a one-click-to-allow mechanism for building the CSP allow-list based on what breaks, but I haven’t integrated that idea into datasette-apps\njust yet.\nSQL queries are also visibly logged—scroll to the bottom of the timeline page to see that in action.\nStored queries for write operations\nI want apps to be able to conditionally write to the database, but this is an even more dangerous proposition than SQL reads!\nMy solution involves Datasette’s stored queries feature, rebranded from “canned queries” and given a major upgrade in the recent Datasette 1.0a31—work that was directly inspired by Datasette Apps.\nUsers can create a stored write query that performs an insert or update, then allow-list that specific query for an app to use. Usage from code inside an app looks like this:\nconst result = await datasette.storedQuery(\"todos\", \"add_todo\", {\ntitle: \"Buy milk\",\ndue_date: \"2026-06-20\",\npriority: \"high\",\ncompleted: false\n});\nI’m only just beginning to explore the possibilities this unlocks myself, but my goal is to support full read-write applications built safely as Datasette Apps.\nCopy and paste a prompt to build an app\nThe Datasette Apps plugin has no dependency on LLMs at all, but these self-contained apps are the perfect shape to be written by a modern LLM.\nThe create app form includes a copyable prompt at the end. This prompt has everything a model needs to know to build a new app, including the schema of any selected databases.\nThis means you can click “copy”, paste it into ChatGPT or Claude or Gemini, tell it what you need, and there’s a good chance the model will spit out the code necessary to build the app.\nIf you have Datasette Agent installed your AI assistant will also gain tools to both create new apps and edit existing ones, Claude Artifacts style.\nBuilt with so much AI assistance\nDatasette Apps started life back in April as datasette-agent-artifacts, a plugin I have since renamed to datasette-agent-edit\nkeeping only its editing tools. I built that as one of the first plugins for Datasette Agent, to help get the plugin hooks into the right shape. That first prototype was mainly built using Claude Opus 4.6 in Claude Code.\nWhen I switched track to Datasette Apps I started with a plan constructed using Codex Desktop and GPT-5.5 xhigh, based on extensive dialog and feeding in both datasette-agent-artifacts\nand other prototypes I had built.\nMost of the work that followed stuck with Codex, but in the few short days that we had access to Claude Fable 5 I had it run a security evaluation of the product (an ability that would get it banned by the US government shortly afterwards) and it found a very real problem.\nI was allowing users to allow-list CSP hosts for their apps, but Fable pointed out the following attack:\n- A less privileged user with\ncreate-app\npermission creates an app that queries SQLite for all available tables and selects and exfiltrates all of the data to a host they had allow-listed via CSP. - They then trick an administrator user with access to private data into visiting their app.\n- ... and the app can now run queries as that user and steal their private data!\nThat’s clearly unacceptable. I fixed it by restricting the ability to allow-list any domain to a new apps-set-csp\npermission, which is intended just for trusted staff. Site administrators can also configure Datasette with a list of allowed_csp_origins\n, which regular users can then select. This means you can do things like allow cdnjs.cloudflare.com\nand your users will be able to build apps that load extra JavaScript libraries from the cdnjs CDN.\nI’ve reviewed Datasette Apps extremely closely, especially the security-adjacent parts of it. The critical sandbox and CSP configuration are based on multiple AI-assisted prototypes and tests.\nIt’s looking good so far\nI’m really pleased with this initial release.\nDatasette is growing beyond its origins as an application for serving read-only data into a much richer ecosystem of tools for doing useful things with that data once it has been collected.\nDatasette’s roots are in data journalism. I’ve always been interested in the question of what comes next after a journalist gets their hands on a giant dump of data about the world. Datasette supports exploring and publishing it. Datasette Agent adds interrogating it with AI assistance. Now Datasette Apps expands that to building custom interfaces and visualizations to help unlock the stories that are hidden within."])</script><script>self.__next_f.push([1,"7:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-[#050505] bg-[radial-gradient(circle_at_top,_var(--tw-gradient-stops))] from-amber-900/10 via-transparent to-transparent text-slate-200\",\"children\":[\"$\",\"main\",null,{\"className\":\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"Article navigation\",\"className\":\"mb-10 flex items-center justify-between print:hidden\",\"children\":[[\"$\",\"$L11\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3\",\"children\":[false,[\"$\",\"$L12\",null,{\"article\":{\"blue_team_analysis\":\"\",\"cached_langs\":[],\"category\":\"tech_surveillance\",\"directive\":\"Peer-Reviewed Science and Research\",\"dossier\":{\"avg_sentence_len\":21.9,\"chimera_score\":59,\"coleman_liau\":12.01,\"dale_chall\":11.3,\"entities_found\":[\"ORG\",\"DATE\",\"PERSON\",\"GPE\"],\"entity_date_count\":6,\"entity_event_count\":0,\"entity_gpe_count\":6,\"entity_loc_count\":0,\"entity_money_count\":0,\"entity_org_count\":44,\"entity_person_count\":24,\"nlp_avg_sentence_len\":\"21.9\",\"nlp_chimera_score\":\"59\",\"nlp_coleman_liau\":\"12.01\",\"nlp_dale_chall\":\"11.3\",\"nlp_entity_date\":\"6\",\"nlp_entity_event\":\"0\",\"nlp_entity_gpe\":\"6\",\"nlp_entity_loc\":\"0\",\"nlp_entity_money\":\"0\",\"nlp_entity_org\":\"44\",\"nlp_entity_person\":\"24\",\"nlp_fk_grade\":\"11.2\",\"nlp_objectivity\":\"57.8\",\"nlp_reading_label\":\"Graduate\",\"nlp_reading_level\":\"high_school\",\"nlp_sentence_count\":\"74\",\"nlp_sentiment\":\"0.9986\",\"nlp_smog\":\"12.98\",\"nlp_subjectivity\":\"0.422\",\"nlp_syllable_count\":\"2506\",\"nlp_vader_neg\":\"0.043\",\"nlp_vader_neu\":\"0.851\",\"nlp_vader_pos\":\"0.106\",\"nlp_word_count\":\"1618\",\"objectivity_score\":57.8,\"readability_grade\":11.2,\"reading_label\":\"Graduate\",\"reading_level\":\"high_school\",\"sentence_count\":74,\"sentiment\":0.9986,\"smog_index\":12.98,\"subjectivity\":0.422,\"syllable_count\":2506,\"vader_neg\":0.043,\"vader_neu\":0.851,\"vader_pos\":0.106,\"word_count\":1618},\"id\":\"9c71a47352fbe0c808b918f2a60e0fea\",\"imageUrl\":\"https://static.simonwillison.net/static/2026/datasette-apps-card.jpg\",\"nlp_avg_sentence_len\":\"21.9\",\"nlp_chimera_score\":\"59\",\"nlp_coleman_liau\":\"12.01\",\"nlp_dale_chall\":\"11.3\",\"nlp_entity_date\":\"6\",\"nlp_entity_event\":\"0\",\"nlp_entity_gpe\":\"6\",\"nlp_entity_loc\":\"0\",\"nlp_entity_money\":\"0\",\"nlp_entity_org\":\"44\",\"nlp_entity_person\":\"24\",\"nlp_fk_grade\":\"11.2\",\"nlp_objectivity\":\"57.8\",\"nlp_reading_label\":\"Graduate\",\"nlp_reading_level\":\"high_school\",\"nlp_sentence_count\":\"74\",\"nlp_sentiment\":\"0.9986\",\"nlp_smog\":\"12.98\",\"nlp_subjectivity\":\"0.422\",\"nlp_syllable_count\":\"2506\",\"nlp_vader_neg\":\"0.043\",\"nlp_vader_neu\":\"0.851\",\"nlp_vader_pos\":\"0.106\",\"nlp_word_count\":\"1618\",\"origin\":\"rss\",\"original_text\":\"$13\",\"owner\":\"\",\"purple_team_analysis\":\"\",\"red_team_analysis\":\"\",\"sentinel_analysis\":\"{\\\"synthetic_confidence\\\": 0.15, \\\"assessment\\\": \\\"LIKELY_HUMAN\\\", \\\"indicators\\\": [], \\\"human_signals\\\": [], \\\"summary\\\": \\\"The text displays strong indicators of human authorship due to personalized experience, idiosyncratic emphasis, and deep, nuanced technical reflection on security tradeoffs, which are characteristic of an expert developer documenting their process.\\\"}\",\"sourceUrl\":\"https://simonwillison.net/2026/Jun/18/datasette-apps/#atom-entries\",\"source_lang\":\"English\",\"source_name\":\"Simon Willison’s Weblog\",\"timestamp\":\"2026-06-30T13:59:32.883583+00:00\",\"title\":\"Datasette Apps: Host custom HTML applications inside Datasette\",\"url\":\"https://arc-codex.com/article/9c71a47352fbe0c808b918f2a60e0fea\",\"visibility\":\"public\"},\"comments\":[{\"article_id\":\"9c71a47352fbe0c808b918f2a60e0fea\",\"author\":\"A.R.C. Counter-Analyst\",\"id\":\"c24f9ebd-ccdd-4b4e-afaa-5033f8e742c4\",\"parent_id\":\"\",\"reactions\":{},\"text\":\"While the implementation of CSP and MessageChannel offers strong theoretical sandboxing, the complexity of allowing read-write SQL interactions through dynamic client-side code introduces a significant attack surface that must be rigorously tested. How do you ensure that user-defined applications, even those generated by LLMs, cannot exploit subtle timing or side-channel vulnerabilities to bypass these protective boundaries?\",\"timestamp\":\"2026-06-30T14:05:21.305967+00:00\"}]}]]}]]}],\"$L14\",\"$L15\"]}]}]\n"])</script><script>self.__next_f.push([1,"16:I[90137,[\"/_next/static/chunks/aea1cd1d556fc828.js\",\"/_next/static/chunks/6e1cb0e67c014159.js\",\"/_next/static/chunks/7476f5a12b25079b.js\",\"/_next/static/chunks/38c07ebfee01469f.js\",\"/_next/static/chunks/ee81b3a743c1f464.js\",\"/_next/static/chunks/b3d88ca2de964433.js\"],\"default\"]\n14:[\"$\",\"article\",null,{\"className\":\"animate-in fade-in slide-in-from-bottom-4 duration-700\",\"children\":[\"$\",\"$L16\",null,{\"card\":\"$7:props:children:props:children:0:props:children:1:props:children:1:props:article\",\"comments\":\"$7:props:children:props:children:0:props:children:1:props:children:1:props:comments\",\"isCompact\":false,\"initialLang\":null,\"defaultExpandedSection\":\"purpleTeam\",\"fullyExpanded\":true}]}]\n15:[\"$\",\"footer\",null,{\"className\":\"h-24 flex items-center justify-center opacity-20 print:hidden\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-0.5 bg-gradient-to-b from-amber-500 to-transparent h-full rounded-full\"}]}]\n"])</script></body></html>