Datasette Apps: Host customized HTML functions inside Datasette<\/h2>\n
18th June 2026<\/p>\n
Right now we launched a brand new plugin for Datasette, datasette-apps, with this launch announcement put up on the Datasette mission weblog. That put up has the what, however I\u2019m going to increase on that slightly bit right here to supply the why.<\/p>\n
The TL;DR<\/h4>\n
Datasette Apps are self-contained HTML+JavaScript functions that run in a tightly constrained sandbox hosted in your Datasette utility. They will use JavaScript to run read-only SQL queries towards knowledge in Datasette, and might run write queries too in the event you configure them with some saved queries.<\/p>\n
Right here\u2019s a quite simple instance and a extra complicated customized timeline instance\u2014the latter seems like this:<\/p>\n
![\"Screenshot](\"https:\/\/static.simonwillison.net\/static\/2026\/datasette-timeline-app.jpg\")
<\/p>\n
Apps are allowed to run JavaScript and render HTML and CSS. They’re restricted when it comes to entry\u2014the they run in prevents them from accessing cookies or localStorage and so they even have an injected CSP header (because of this analysis) which prevents them from making HTTP requests to exterior hosts, stopping a malicious or buggy app from exfiltrating non-public knowledge.<\/p>\n
Datasette Apps began out as my try at constructing a Claude Artifacts mechanism for Datasette Agent, however I rapidly realised that the sandboxed sample is attention-grabbing for far more than simply including customized apps in a chat interface and promoted it to its personal top-level idea inside the Datasette ecosystem.<\/p>\n
They\u2019re additionally a enjoyable solution to flip my multi-year experiment in vibe-coded HTML instruments right into a core characteristic of my essential mission!<\/p>\n
You possibly can check out Datasette Apps by signing in with GitHub to the agent.datasette.io demo occasion.<\/p>\n
Why construct this?<\/h4>\n
Because the very first launch, Datasette has provided a versatile backend for creating customized HTML apps through its JSON API.<\/p>\n
Considered one of my earliest Datasette initiatives was an inner search engine for documentation once I labored at Eventbrite\u2014it labored by importing paperwork from totally different programs into SQLite on a cron after which serving them by a Datasette occasion with a customized HTML+JavaScript search interface that instantly queried the Datasette API.<\/p>\n
I had client-side JavaScript setting up SQL queries, which initially was supposed as an engineering joke however turned out to be a very productive manner of iterating on the app!<\/p>\n
That mission, mixed with my expertise constructing my HTML instruments assortment and my experiments with Claude Artifacts, has satisfied me that including a Datasette-style backend to a self-contained HTML frontend is an astonishingly highly effective mixture.<\/p>\n
Think about how far more helpful Claude Artifacts may very well be if they’d entry to a persistent relational database. That\u2019s what I\u2019m constructing with Datasette Apps!<\/p>\n
Neat concepts in Datasette Apps<\/h4>\n
Listed here are a number of of the concepts and patterns I\u2019ve discovered constructing this which I believe have endurance.<\/p>\n
+ <\/p>\n
That is the magic mixture that makes Datasette Apps possible within the first place. I have to run untrusted HTML and JavaScript on a extremely delicate area\u2014an authenticated Datasette occasion can include all types of personal knowledge. The sandbox= attribute lets me run that untrusted code in a manner that can’t work together with the dad or mum utility\u2014it will probably\u2019t learn the DOM, or entry cookies, or steal secrets and techniques from localStorage. It might probably nonetheless use fetch() and associates to load content material (or exfiltrate knowledge) from different domains. However… it seems in the event you begin an HTML web page with a header you possibly can set extra insurance policies that lock down entry to different domains. I used to be frightened that malicious JavaScript would be capable to replace or take away that header nevertheless it seems that doesn\u2019t work\u2014as soon as set, the CSP coverage is immutable for the content material of that body.<\/p>\n
Locked down APIs with postMessage() and MessageChannel()<\/p>\n
Having locked down these iframes to the purpose that they couldn\u2019t do something attention-grabbing in any respect, the problem was to open them again once more such that they may run an allow-list of operations, beginning with read-only SQL queries towards specified databases.<\/p>\n
I constructed the primary model of this with postMessage(), which permits a baby iframe to ship messages to the dad or mum window. I created a easy protocol for requesting that the dad or mum run a SQL question\u2014the dad or mum may then confirm it was towards an allow-listed database earlier than executing it.<\/p>\n
One of many LLM instruments, I believe it was GPT-5.5, advised that postMessage() by itself may be exploited if the iframe by some means hundreds extra code from an untrusted area. I don\u2019t suppose that applies to Datasette Apps, however I additionally consider in protection in depth, so I had GPT-5.5 assist me port to a MessageChannel() based mostly transport as an alternative.<\/p>\n
MessageChannel() has the benefit that if a web page navigates to some other place the channel closes robotically, eradicating any probability of executing instructions despatched from an untrusted exterior web page.<\/p>\n
Seen logs, for queries and errors<\/p>\n
If you happen to navigate to the timeline demo and seek for the string usercontent you\u2019ll pull in some search outcomes that embed photos from the user-images.githubusercontent.com area. This area shouldn’t be within the CSP allow-list, so it journeys an error.<\/p>\n
These errors are captured and transmitted again to the dad or mum body, the place they are often displayed in a helpful error log. That is meant to make hacking on apps extra productive by surfacing otherwise-invisible issues.<\/p>\n
I constructed an experiment demonstrating that you would be able to even flip this right into a one-click-to-allow mechanism for constructing the CSP allow-list based mostly on what breaks, however I haven\u2019t built-in that concept into datasette-apps simply but.<\/p>\n
SQL queries are additionally visibly logged\u2014scroll to the underside of the timeline web page to see that in motion.<\/p>\n
Saved queries for write operations<\/p>\n
I would like apps to have the ability to conditionally write to the database, however that is an much more harmful proposition than SQL reads!<\/p>\n
My answer includes Datasette\u2019s saved queries characteristic, rebranded from \u201ccanned queries\u201d and given a serious improve within the current Datasette 1.0a31\u2014work that was instantly impressed by Datasette Apps.<\/p>\n
Customers can create a saved write question that performs an insert or replace, then allow-list that particular question for an app to make use of. Utilization from code inside an app seems like this:<\/p>\n
\n title<\/span>: “Purchase milk”<\/span>,<\/span>
\n due_date<\/span>: “2026-06-20”<\/span>,<\/span>
\n precedence<\/span>: “excessive”<\/span>,<\/span>
\n accomplished<\/span>: false<\/span>
\n}<\/span>)<\/span>;<\/span><\/div>\n
I\u2019m solely simply starting to discover the chances this unlocks myself, however my aim is to help full read-write functions constructed safely as Datasette Apps.<\/p>\n
Copy and paste a immediate to construct an app<\/p>\n
The Datasette Apps plugin has no dependency on LLMs in any respect, however these self-contained apps are the right form to be written by a contemporary LLM.<\/p>\n
The create app kind features a copyable immediate on the finish. This immediate has every part a mannequin must know to construct a brand new app, together with the schema of any chosen databases.<\/p>\n
![\"Screenshot](\"https:\/\/datasette.io\/static\/blog\/2026\/create-app-prompt.jpg\")
<\/p>\n
This implies you possibly can click on \u201ccopy\u201d, paste it into ChatGPT or Claude or Gemini, inform it what you want, and there\u2019s a great probability the mannequin will spit out the code mandatory to construct the app.<\/p>\n
When you’ve got Datasette Agent put in your AI assistant may also acquire instruments to each create new apps and edit present ones, Claude Artifacts model.<\/p>\n
![\"Screenshot](\"https:\/\/datasette.io\/static\/blog\/2026\/create-app-agent.jpg\")
<\/p>\n
Constructed with a lot AI help<\/h4>\n
Datasette Apps began life again in April as datasette-agent-artifacts, a plugin I’ve since renamed to datasette-agent-edit conserving solely its modifying instruments. I constructed that as one of many first plugins for Datasette Agent, to assist get the plugin hooks into the fitting form. That first prototype was primarily constructed utilizing Claude Opus 4.6 in Claude Code.<\/p>\n
Once I switched monitor to Datasette Apps I began with a plan constructed utilizing Codex Desktop and GPT-5.5 xhigh, based mostly on in depth dialog and feeding in each datasette-agent-artifacts and different prototypes I had constructed.<\/p>\n
Many of the work that adopted caught with Codex, however within the few quick days that we had entry to Claude Fable 5 I had it run a safety analysis of the product (a capability that may get it banned by the US authorities shortly afterwards) and it discovered a really actual drawback.<\/p>\n
I used to be permitting customers to allow-list CSP hosts for his or her apps, however Fable identified the next assault:<\/p>\n
A much less privileged person with create-app permission creates an app that queries SQLite for all obtainable tables and selects and exfiltrates the entire knowledge to a number they’d allow-listed through CSP.
\nThey then trick an administrator person with entry to personal knowledge into visiting their app.
\n… and the app can now run queries as that person and steal their non-public knowledge!<\/p>\n
That\u2019s clearly unacceptable. I fastened it by limiting the flexibility to allow-list any area to a brand new apps-set-csp permission, which is meant only for trusted workers. Web site directors also can configure Datasette with a listing of allowed_csp_origins, which common customers can then choose. This implies you are able to do issues like permit cdnjs.cloudflare.com and your customers will be capable to construct apps that load further JavaScript libraries from the cdnjs CDN.<\/p>\n
I\u2019ve reviewed Datasette Apps extraordinarily intently, particularly the security-adjacent components of it. The crucial sandbox and CSP configuration are based mostly on a number of AI-assisted prototypes and exams.<\/p>\n
It\u2019s wanting good to date<\/h4>\n
I\u2019m actually happy with this preliminary launch.<\/p>\n
Datasette is rising past its origins as an utility for serving read-only knowledge right into a a lot richer ecosystem of instruments for doing helpful issues with that knowledge as soon as it has been collected.<\/p>\n
Datasette\u2019s roots are in knowledge journalism. I\u2019ve at all times been within the query of what comes subsequent after a journalist will get their fingers on an enormous dump of information concerning the world. Datasette helps exploring and publishing it. Datasette Agent provides interrogating it with AI help. Now Datasette Apps expands that to constructing customized interfaces and visualizations to assist unlock the tales which can be hidden inside.<\/p>\n<\/div>\n