Datasette Apps: Host customized HTML functions inside Datasette

Datasette Apps: Host customized HTML functions inside Datasette

18th June 2026

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’m going to increase on that slightly bit right here to supply the why.

The TL;DR

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.

Right here’s a quite simple instance and a extra complicated customized timeline instance—the latter seems like this:

Apps are allowed to run JavaScript and render HTML and CSS. They’re restricted when it comes to entry—the 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.

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.

They’re additionally a enjoyable solution to flip my multi-year experiment in vibe-coded HTML instruments right into a core characteristic of my essential mission!

You possibly can check out Datasette Apps by signing in with GitHub to the agent.datasette.io demo occasion.

Why construct this?

Because the very first launch, Datasette has provided a versatile backend for creating customized HTML apps through its JSON API.

Considered one of my earliest Datasette initiatives was an inner search engine for documentation once I labored at Eventbrite—it 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.

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!

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.

Think about how far more helpful Claude Artifacts may very well be if they’d entry to a persistent relational database. That’s what I’m constructing with Datasette Apps!

Neat concepts in Datasette Apps

Listed here are a number of of the concepts and patterns I’ve discovered constructing this which I believe have endurance.

+

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—an 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—it will probably’t 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’t work—as soon as set, the CSP coverage is immutable for the content material of that body.

Locked down APIs with postMessage() and MessageChannel()

Having locked down these iframes to the purpose that they couldn’t 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.

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—the dad or mum may then confirm it was towards an allow-listed database earlier than executing it.

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’t 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.

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.

Seen logs, for queries and errors

If you happen to navigate to the timeline demo and seek for the string usercontent you’ll 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.

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.

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’t built-in that concept into datasette-apps simply but.

SQL queries are additionally visibly logged—scroll to the underside of the timeline web page to see that in motion.

Saved queries for write operations

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!

My answer includes Datasette’s saved queries characteristic, rebranded from “canned queries” and given a serious improve within the current Datasette 1.0a31—work that was instantly impressed by Datasette Apps.

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:

I’m 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.

Copy and paste a immediate to construct an app

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.

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.

This implies you possibly can click on “copy”, paste it into ChatGPT or Claude or Gemini, inform it what you want, and there’s a great probability the mannequin will spit out the code mandatory to construct the app.

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.

Constructed with a lot AI help

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.

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.

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.

I used to be permitting customers to allow-list CSP hosts for his or her apps, however Fable identified the next assault:

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.
They then trick an administrator person with entry to personal knowledge into visiting their app.
… and the app can now run queries as that person and steal their non-public knowledge!

That’s 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.

I’ve 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.

It’s wanting good to date

I’m actually happy with this preliminary launch.

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.

Datasette’s roots are in knowledge journalism. I’ve 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.