Build a SQLite Web App with Datasette

Turn your SQLite data into a working web app with live Datasette queries.

Introduction

30 Second Summary

Personal data often ends up trapped in rows that are awkward to browse. That makes a reading list or expense log harder to use in everyday decisions.

In this project, you will turn a SQLite file you own into a small web app that runs inside Datasette. Datasette Apps gives you a prompt that helps any chat AI write the app's HTML.

What You'll Build

Your local app turns a reading list or expense log into an interactive view where newly added rows appear after a reload.

By the end of this project, you'll have:

  • A working web app that displays your own data as a filterable card view or summary chart.
  • A live connection that lets the app query your SQLite table inside Datasette.
  • An editable app that you can update in the browser before checking the result against your latest data.
  • Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You need Python, pip, a web browser, and access to any chat AI. No API key is required.

Before We Start

Your future SQLite app runs on your machine. Every later step depends on a terminal that can run Python commands.

A web browser displays the app. A chat AI gives you the HTML that powers it.

In this step, get ready to:
  • Open a terminal for the local build.
  • Verify the Python package tools your project needs.
  • Confirm access to the browser-based tools.
Open a terminal

A terminal gives you a place to run the commands that create your database server. Choose the instructions for your operating system.

macOS

  • Press Cmd+Space to open Spotlight.
  • Type Terminal into the search field.
  • Press Enter to open Terminal.

You should see a window with a command prompt waiting for input.

Windows

  • Press the Windows key to open Start search.
  • Type Windows PowerShell into the search field.
  • Press Enter to open Windows PowerShell.

You should see a window with a command prompt waiting for input.

First hurdle cleared. Your terminal is ready for the checks ahead.

Check Python and pip

Python runs the local server used later in this project. The pip package installer supplies the software that Python needs.

macOS

  • Check your Python installation by running these commands:
python3 --version
python3 -m pip --version

What do these checks prove?

  • The first command asks python3 to report its installed version.
  • The second command asks that Python installation to locate pip.

You should see one Python version line. A separate line should identify pip.

Windows

  • Check your Python installation by running these commands:
py --version
py -m pip --version

What do these checks prove?

  • The first command asks the py launcher to report its Python version.
  • The second command asks that Python installation to locate pip.

You should see one Python version line. A separate line should identify pip.

✔️ I see Python and pip versions

That is the main setup check complete. Python can run locally with its package installer.

ⓧ I only see a Python version

Python includes a module called ensurepip that can restore its bundled package installer. Choose the command for your operating system.

macOS

  • Install the bundled pip version by running this command:
python3 -m ensurepip --upgrade
What does this command do?

The ensurepip module installs pip from files bundled with Python. The --upgrade option updates it to the bundled version when needed.

  • Confirm pip is available by running this check:
python3 -m pip --version
What should I see?

You should see a line identifying the installed pip version. That output confirms Python can now install packages.

Windows

  • Install the bundled pip version by running this command:
py -m ensurepip --default-pip
What does this command do?

The ensurepip module installs pip from files bundled with Python. The --default-pip option also installs the standard pip command.

  • Confirm pip is available by running this check:
py -m pip --version
What should I see?

You should see a line identifying the installed pip version. That output confirms Python can now install packages.

ⓧ Python is not available

The installer may ask for permission to add software. That prompt is expected when the installer came from the official Python website.

  • Open the official Python downloads page in your browser.
  • Download the current stable installer for your operating system.
  • Run the downloaded installer.
  • Keep the default installation components selected.
  • Return to the terminal from earlier after the installation finishes.

The official Python installers include pip by default. Choose your operating system to repeat both checks.

macOS

  • Verify the new installation by running these commands:
python3 --version
python3 -m pip --version
What should I see?

You should see one line for Python. You should see another line for pip.

Windows

  • Verify the new installation by running these commands:
py --version
py -m pip --version
What should I see?

You should see one line for Python. You should see another line for pip.

Still missing Python or pip?

Help me diagnose why Python or pip is unavailable. Then share the same command output with the NextWork community if you need a second set of eyes.

Confirm your browser and chat AI

Your browser displays the local Datasette app later in the project. Your chat AI supplies HTML without requiring an API key.

The Datasette Apps repository gives you a quick browser check before you create anything.

Good progress. Your browser can reach the resources used by this project.

A sign-in prompt stays on the chat provider's own site. You never paste those credentials into this project.

  • Open your chosen chat AI in a new browser tab.
  • Complete the service's normal sign-in flow if prompted.
  • Start a new conversation.

Before you send this prompt, do you expect the chat AI to follow the exact response format?

  • Send an access check by pasting the prompt below:
Reply with exactly: READY

Why use this prompt?

This message checks that your conversation can return text. It proves the chat AI is ready before you rely on it for HTML.

You should receive a response containing READY. Your browser-based tools are now ready for the build.

Chat AI not responding?

  • Check that the browser tab shows you are signed in.
  • Start a fresh conversation if the current one cannot accept a message.

Help me work out why my chat AI cannot return the test response.

Your terminal can run Python packages. Next, you will install Datasette and turn your own data into a SQLite database.

Create Your SQLite Database

The app you build later needs a dependable source of data. This step gives it a SQLite database that you own.

Datasette turns that database into a local website.

You will create starter data. You will then confirm that Datasette can read it.

In this step, get ready to:
  • Install Datasette.
  • Create an items table inside my-data.db.
  • Open your table through a local Datasette server.
Install Datasette

Datasette provides the web interface that sits on top of your database. Its command-line tool starts the local server you will use throughout this project.

  • Install Datasette and check that its command is available by running:
pip install datasette
datasette --version

What do these commands do?

  • The first line uses pip to install Datasette.
  • The second line asks the datasette command to report its installed release.

The installation output should finish without an unresolved error. The final line should show a Datasette version number.

✔️ I see a version number

Datasette is installed. Its command is ready to serve your database.

ⓧ Command not found

  • Return to the installation output in your terminal.
  • Follow the official Datasette installation guide if the installation reports a problem.
  • Repeat the two-line command block after resolving the reported problem.

Still missing the Datasette command?

  • Check that the Datasette installation finished successfully.
  • Check that pip installed the package into the same Python environment used by your terminal.

Help me get the Datasette command working.

Create your database

A SQLite database lives in a single file. Inside that file, a table gives every row the same set of columns.

Your items table uses an automatic ID plus a title and notes. The two starter rows give your future app real data to display.

  • Choose a title for your first item: a title from your own data.
  • Choose a note for your first item: a note about your first item.
  • Choose a title for your second item: another title from your own data.
  • Choose a note for your second item: a note about your second item.
  • Keep each starter value to simple text without apostrophes.
  • Create the database on your Desktop and confirm the file exists by running these commands:
cd ~/Desktop
python -c "import sqlite3; con = sqlite3.connect('my-data.db'); con.execute('CREATE TABLE items (id INTEGER PRIMARY KEY, title TEXT, notes TEXT)'); con.executemany('INSERT INTO items (title, notes) VALUES (?, ?)', [('[[ITEM_ONE_TITLE="a title from your own data"]]', '[[ITEM_ONE_NOTES="a note about your first item"]]'), ('[[ITEM_TWO_TITLE="another title from your own data"]]', '[[ITEM_TWO_NOTES="a note about your second item"]]')]); con.commit(); con.close()"
ls

What creates your database?

  • The first line moves your terminal to the Desktop.
  • The sqlite3.connect() call opens my-data.db.
  • SQLite creates the database file when it is missing.
  • CREATE TABLE defines the id, title, and notes columns.
  • executemany() inserts your two starter rows.
  • commit() writes those changes to disk.
  • close() releases the database connection.
  • The final line lists the files on your Desktop. This makes my-data.db visible in the output.

You should see my-data.db in the terminal output.

Database command not working?

  • Confirm that your terminal path ends with Desktop.
  • Move any earlier my-data.db file aside in Finder or File Explorer if the error mentions an existing table.
  • Run the database creation block once after moving the earlier file.
  • Use python3 in place of python if that is the Python command available in your terminal.

Help me create my SQLite database.

✔️ Awesome, I've got everything!

Your database file now contains its table and starter rows.

ⓧ I'd like to double check the full code

Your database should match this structure:

  • The my-data.db file exists on your Desktop.
  • The database contains an items table.
  • The table contains an id integer primary key.
  • The table contains a title text column.
  • The table contains a notes text column.
  • One starter row stores a title from your own data with a note about your first item.
  • Another starter row stores another title from your own data with a note about your second item.
Open your table in Datasette

Your database file now holds the data. A local Datasette server makes that data visible through your browser.

Before you start the server, what do you expect the table page to show? Your prediction is ready for a quick test.

  • Start Datasette with your database and open its local website by running:
datasette my-data.db -o

What does this command do?

  • The datasette command starts a local web server with my-data.db loaded.
  • The -o option asks Datasette to open the local website in your browser.

Your terminal now stays attached to the server process. Your browser opens the Datasette home page.

  • Keep the Datasette process running in your terminal.
  • Switch back to the browser page that Datasette opened.
  • Click my-data in the database list.
  • Click items in the table list.

You should see the id, title, and notes columns. Your two starter rows should appear beneath them.

That is your first visible win. Datasette is reading live rows from the SQLite file on your machine.

Table page not opening?

  • Confirm that the Datasette process remains active in your terminal.
  • Use the local address shown in the terminal if your browser stays closed.
  • Check that the server command names my-data.db exactly.
  • Stop any other local server using the same port if Datasette reports that the port is unavailable.

Help me open my items table in Datasette.

Your data now has a working browser interface. Next up, you will add the plugin that gives Datasette a home for custom apps.

Install and Enable Datasette Apps

Your SQLite database is already serving its items table through Datasette. The next layer is an app catalog that can host custom HTML against that live data.

Datasette Apps provides that layer. This step installs release 0.3a0. You will also grant the permission required to create apps.

In this step, get ready to:
  • Install the pinned Datasette Apps plugin.
  • Grant app creation access to signed-in users.
  • Verify the enabled plugin through the apps catalog.
Install the pinned plugin

A Datasette plugin must share the same Python environment as Datasette. The Datasette installer places it in that environment without making you locate the environment yourself.

  • In the terminal from earlier, press Ctrl+C to stop the running Datasette server.
  • Check the installed plugins by running this command:
datasette plugins

What does this command show?

The output lists every plugin available to the active Datasette installation. Each entry includes its installed version.

✔️ I see version 0.3a0

Your Datasette Apps release already matches the project pin. You can continue without reinstalling it.

ⓧ I see a different version

A different release may expose changed pages or behavior. Install the project release so your setup stays reproducible.

  • Replace the installed release with the project pin by running this command:
datasette install datasette-apps==0.3a0

What does this command do?

The datasette installer targets the same environment as Datasette. The package specification selects release 0.3a0 exactly.

  • Confirm the installed version by running this command:
datasette plugins

What should I see?

Look for the apps plugin entry. Its version should now be 0.3a0.

ⓧ I do not see Datasette Apps

The plugin still needs to join your Datasette environment. The first installation can pause briefly while its dependencies download.

  • Install the pinned plugin by running this command:
datasette install datasette-apps==0.3a0

What does this command do?

The installer adds Datasette Apps beside Datasette. The version constraint keeps the installation on release 0.3a0.

  • Confirm the plugin is available by running this command:
datasette plugins

What should I see?

The plugin list should now include an apps entry with version 0.3a0.

That is the first dependency locked down. Datasette can now load the same plugin release every time you revisit this project.

  • Record the exact plugin release in requirements.txt by running this command:
printf 'datasette-apps==0.3a0\n' > requirements.txt

Why record the pin?

The plugin is an alpha release. The entry in requirements.txt records the working version so a future installation does not silently use changed behavior.

  • Display the saved version pin by running this command:
cat requirements.txt

What should I see?

The terminal should print datasette-apps==0.3a0. This confirms the project records the same release that you installed.

Plugin installation failing?

  • Check that the active Python version is 3.11 or newer.
  • Confirm your internet connection can download Python packages.
  • Retry the installation from the same terminal environment that provides the datasette command.

Help me troubleshoot my Datasette Apps installation.

Grant app creation access

Datasette Apps protects app creation with the create-app permission. A small YAML configuration grants that permission to any signed-in user.

  • Create datasette.yaml beside my-data.db by running this command:
printf 'permissions:\n  create-app:\n    id: "*"\n' > datasette.yaml

What does this configuration do?

  • The permissions block holds explicit access rules.
  • The create-app rule controls who can create stored apps.
  • The wildcard * matches any user with an identity after sign-in.
  • Confirm the saved configuration by running this command:
cat datasette.yaml

What should I see?

You should see the permissions block with a nested create-app rule. The final line should grant access to signed-in identities.

✔️ Awesome, I've got everything!

Your permission configuration is saved. Keep datasette.yaml beside my-data.db.

ⓧ I'd like to double check the full code

Compare your complete datasette.yaml file with this configuration:

permissions:
  create-app:
    id: "*"

The indentation places create-app inside permissions. The id rule sits one level deeper.

Configuration looks different?

  • Check that datasette.yaml is in the same terminal directory as my-data.db.
  • Keep two spaces before create-app.
  • Keep four spaces before id.

Help me check my Datasette permission configuration.

Restart Datasette and open the apps catalog

Datasette discovers installed plugins when the server starts. Restarting with datasette.yaml loads the plugin routes plus your permission rule.

The next start prints a one-use sign-in URL. Treat that URL like a temporary credential. Keep it out of screenshots or shared messages.

  • Start Datasette with your database and configuration by running this command:
datasette my-data.db --config datasette.yaml --root

What does this command do?

  • The my-data.db argument loads your existing database.
  • The --config option applies the permission rule from datasette.yaml.
  • The --root option prints a one-use URL that signs you into the local server.

The terminal stays busy while the server runs. You should see a local server address plus the one-use sign-in URL.

  • Open the one-use sign-in URL printed in the terminal.
  • Return to the browser tab from earlier.

Before you load the final page, what do you expect to replace the table view now that the plugin is active?

  • Enter http://127.0.0.1:8001/-/apps in the browser address bar.

You should see the Datasette Apps catalog. It may contain no saved apps yet.

You made the plugin visible inside your running server. The apps catalog is now ready to hold an HTML app backed by your live table.

Apps catalog not loading?

  • Check that the terminal still shows the Datasette server running.
  • Confirm the startup command names both my-data.db and datasette.yaml.
  • Confirm the browser address ends with /-/apps.

Help me find why my local Datasette Apps catalog is not loading.

Your app workspace is enabled. Next up, you will ask a chat AI to design an interface for the data in items.

Generate Your App HTML

Your local Datasette server can already read your SQLite database. Datasette Apps now needs a description of the interface you want.

The creator page produces a prompt that explains how the app can query your database. In this step, you will pair that prompt with a filterable card-view description so your chat AI can return the app's complete HTML.

In this step, get ready to:
  • Capture the generated creator prompt.
  • Describe a filterable card view for your data.
  • Verify that the returned HTML queries your live table.
Copy the generated creator prompt

The generated prompt carries the Datasette-specific instructions that your chat AI needs. Copying it intact gives the model the right foundation for your app.

The local server address stays the same across these pages. Only the path changes when you move into the creator.

  • Return to the /-/apps page from earlier.
  • Click your browser's address bar.
  • Replace /-/apps at the end of the address with /-/apps/create.
  • Press Enter.

You should see the app creator with a generated prompt ready to copy. This confirms that your existing create-app permission is working.

  • Click inside the field containing the generated prompt.
  • Press Cmd+A (macOS) or Ctrl+A (Windows) to select the prompt.
  • Press Cmd+C (macOS) or Ctrl+C (Windows) to copy it.

Can't Reach the Creator Page?

  • Return to the terminal from earlier.
  • Confirm that the local Datasette server process is still running.
  • Review the previous step if the process has stopped.
  • Check that the permission configuration still grants your current user the create-app permission.

Help me work out why my local Datasette app creator is unavailable.

Describe the filterable card view

The generated prompt supplies the technical connection details. Your description defines what someone can see and do in the finished app.

  • Open a new browser tab.
  • Navigate to the chat AI you chose for this project.

You should see the chat AI's conversation screen. Keep the Datasette creator page open in its original tab.

  • Start a new conversation using the service's new conversation control.
  • Paste the copied creator prompt into the message box using Cmd+V (macOS) or Ctrl+V (Windows).
  • Append a description requesting complete HTML for a filterable items card view that shows title plus notes from a live datasette.query() call to my-data.db.

Before you submit the message, do you expect the generated prompt to give the chat AI enough context to connect the interface to your database?

  • Submit the message using the chat AI's send control.

A full HTML response can take a moment, so a brief pause is expected. You should receive one complete HTML document containing the card layout, filter behaviour, and live query logic.

Good progress: your candidate app HTML is ready for a precise data check.

Check the HTML uses live data

AI-generated code needs a quick contract check before you save it. The response must connect to the exact database structure that already exists on your machine.

Before you inspect the response, do you expect it to include every database detail from your description?

  • Inspect the response for a call to datasette.query().
  • Confirm that the call names my-data.db as the database.
  • Confirm that the query retrieves rows from the items table.
  • Confirm that each rendered card reads the row's title value.
  • Confirm that each rendered card reads the row's notes value.
  • Confirm that the page includes a filter for matching card content.

✔️ I found every live-data check

Your returned HTML matches the app description. Keep the full response available for the next step.

ⓧ One or more checks are missing

  • Reply in the same conversation with the missing requirement.
  • Ask the chat AI to return one complete revised HTML document.
  • Repeat the live-data checks after the revised response arrives.

Still Missing a Live-Data Detail?

  • Paste the original generated prompt into a fresh conversation.
  • Add the same filterable card-view description beneath it.

Help me revise my generated HTML so it queries the correct Datasette database and table.

You now have complete HTML for a filterable card view of items.

The HTML uses datasette.query() to read my-data.db. Each card renders the row's title plus notes.

Your app HTML is ready. Next up, you will turn that response into a saved Datasette app running against your live table.

Save and Run Your App

The chat AI from earlier has returned the HTML for your filterable card view. That response still needs a home inside Datasette Apps before it can read your live rows.

Saving the app gives it approved access to your SQLite database. Once saved as my-data-app, the running page displays your starter rows in the browser.

In this step, get ready to:
  • Configure the app to read your database.
  • Paste the generated HTML into the app editor.
  • Run my-data-app to see your starter rows as filterable cards.
Configure live data access

Datasette Apps limits each saved app to the databases selected under Data access. Your generated datasette.query() call needs access to the database entry that contains items.

The create page updates its starter HTML when you change the app name or database selection. Setting those values first protects your generated HTML when you paste it next.

  • Switch back to the /-/apps/create page from earlier.
  • Enter my-data-app in the Name field.
  • Find Read-only SQL query databases under Data access.
  • Select the checkbox beside the database entry that lists items.

The Name field should now show my-data-app. The selected database entry should list items among its tables.

Paste and save the app

The HTML editor currently contains the create page's starter template. Replacing the entire template ensures your saved app uses the card view returned by the chat AI.

  • Switch back to the chat AI from earlier.
  • Copy the complete HTML response using the response's copy control.
  • Return to the /-/apps/create page.
  • Click inside the HTML editor.
  • Press Cmd+A (macOS) or Ctrl+A (Windows) to select the existing template.
  • Press Cmd+V (macOS) or Ctrl+V (Windows) to paste the generated HTML.

You should now see the chat AI's complete response inside the editor.

  • Check that the pasted HTML contains a call to datasette.query().
  • Check that the pasted HTML references items, title, and notes.

What should the HTML do?

  • The datasette.query() call requests live rows from the database you approved.
  • The items reference targets the table that holds your starter data.
  • The title and notes values provide the visible content for each card.

Before you create the app, which starter rows do you expect its first query to return?

  • Click Create app at the bottom of the page.

Datasette redirects you to the saved app page. You should see cards built from the current rows in items.

That is the key handoff complete: my-data-app is now a saved Datasette App.

Verify the filterable cards

Each visible card should show a value from the title column. It should also show the matching value from notes.

Before you test the filter, how many cards do you expect to remain when only one title contains your search word?

  • Choose a distinctive word from one visible card title.
  • Enter that word into the app's filter control.

You should see the matching card remain while the other cards disappear.

  • Clear the filter control.

You should see every starter card return. Your saved HTML is querying live data and filtering the rendered rows.

Cards not loading?

A blank card area usually means the generated query cannot access the selected database. It can also mean the returned HTML uses a different table or column name.

Ask for help with the exact page you see: Help me diagnose why my Datasette App is not showing rows from my items table.

Your database now has a working web app on top of it. Next, you will add a row and prove that the cards reflect live data.

Test and Edit Your Live App

Your filterable card app is running on Datasette. Its starter rows are already visible in the browser.

A live app needs to keep pace with its SQLite database. In this step, you will add a test row. You will reload the app to prove datasette.query() retrieves current data. Then you will revise one visible feature through the edit page.

In this step, get ready to:
  • Add one test row to the items table.
  • Reload the app to confirm the new row appears.
  • Edit one visible feature through Datasette Apps.
Prove your app reads live data

A database-backed interface should reflect records added outside the page. You will use Python to add one row directly to my-data.db.

  • Create a second terminal session in the folder that contains my-data.db.
  • Start the Python interactive prompt by running this command:
python

You will see the >>> prompt. This confirms Python is ready to accept the database code.

  • Insert a test row into items by pasting this code into the Python prompt:
# Load Python's built-in SQLite support.
import sqlite3

# Open the database that powers the app.
con = sqlite3.connect("my-data.db")

# Add a test row while letting SQLite assign its id.
con.execute(
    "INSERT INTO items (title, notes) VALUES (?, ?)",
    ("Live data test", "Added to confirm the app reloads database rows."),
)
con.commit()

# Read the saved row back as an immediate database check.
con.execute(
    "SELECT title, notes FROM items WHERE title = ?",
    ("Live data test",),
).fetchone()

# Close the database connection cleanly.
con.close()

What does this database test do?

  • The sqlite3.connect() call opens the existing my-data.db file.
  • The placeholders bind the title and notes as values.
  • The omitted id lets SQLite assign the next primary key.
  • The con.commit() call saves the row for other database connections.
  • The final query reads the new row back before the connection closes.

You should see ('Live data test', 'Added to confirm the app reloads database rows.') in the Python output. Your new row is now stored in my-data.db.

Could not add the test row?

  • Confirm the second terminal session is in the folder that contains the existing my-data.db file.
  • Check that the table name is exactly items.
  • Check that the column names are exactly title and notes.

Help me diagnose the database insert.

Before you reload, do you expect the existing app to show the new row without any HTML changes?

  • Switch back to the running my-data-app page in your browser.
  • Reload the page.

You should see a new card titled Live data test. Its notes should say Added to confirm the app reloads database rows.

That reload proves the app runs its query against the current database contents. Your HTML now reflects data added after the app was created.

Edit one visible feature

The edit page combines your current HTML with a prompt for an LLM. This context helps the chat AI preserve the working query while revising the interface.

  • Replace the path in your browser address bar with /-/apps/my-data-app/edit.

You will see the Edit my-data-app page. The existing app source appears in the HTML editor.

  • Scroll to Use AI to edit this app.
  • Click Copy prompt.
  • Switch back to the chat AI from earlier.
  • Start your edit request by pasting this prompt:
Add a visible counter above the cards.
Make the counter show how many cards match the current filter.
Preserve the existing data query.
Preserve the filter behavior.
Preserve the card layout.
Preserve the title and notes fields.
Return the complete single-file HTML document only.

Why request a counter?

A matching-card counter creates an obvious visual change. Preserving the existing query keeps the app connected to my-data.db.

Asking for a complete document gives the HTML editor one finished replacement. This keeps the edit focused on a feature you can test immediately.

  • Paste the copied Datasette prompt directly below your edit request.
  • Send the message to your chat AI.

The response should contain a complete HTML document. It should retain datasette.query() while adding the counter.

  • Copy the complete HTML response from your chat AI.
  • Return to the Edit my-data-app page.
  • Click inside the HTML editor.
  • Select the existing source with Cmd+A (macOS) or Ctrl+A (Windows).

The existing HTML should now be highlighted in the editor.

  • Paste the revised HTML with Cmd+V (macOS) or Ctrl+V (Windows).

The editor now shows the complete revised HTML. Your existing data access selection remains in place.

Before you save, do you expect the counter to include the new test row when the edited app runs its query?

  • Click Save app.

You will return to the running app. You should see a counter above the cards with a number that matches the visible cards.

  • Enter Live data test in the existing filter field.

You should see one matching card. The counter should show 1.

Counter missing or app blank?

  • Return to /-/apps/my-data-app/edit.
  • Confirm the revised HTML still contains datasette.query().
  • Use Revision history to compare the current version with the previous working version.

Help me repair the edited app.

You have proved the full live-data loop. Your database accepts new rows. Your app retrieves them on reload. Your saved HTML can evolve without losing its connection to the data.

Secret mission

Audit Your App for Accessibility

Your app displays live data through a filterable card view. Now test whether someone can use that filter without a mouse and turn the evidence into a focused accessibility improvement plan.

Clean Up Your Resources

Clean Up Your Resources

Everything you built runs on your local machine, so there are no ongoing cloud costs. Choose whether to keep your resources running, pause them for later, or delete them entirely.

Resources you used:

  • A local Datasette server process.
  • The my-data.db SQLite database containing your items table.
  • The saved Datasette App named my-data-app.

Keep everything running

No action needed. Choose this if you are still testing my-data-app against your live data.

The server continues using a small amount of local memory while it runs. Your database and saved app remain ready in the browser.

Pause - I'll come back to this later

Stop the local server to free its port. Your database and saved app stay on disk.

  • Switch back to the terminal from earlier.
  • Press Ctrl+C to stop the Datasette server.

You will see the terminal return to its command prompt. Your browser can no longer load the local app while the server is stopped.

  • Leave my-data.db in the folder where you created it.
  • Rerun the Datasette server command from earlier when you are ready to continue.

Your database and my-data-app are ready for your next session.

Delete - I don't want to use this again

Remove the saved app and its local database to clear the project data from your machine.

  • Return to /-/apps/my-data-app/edit in the browser from earlier.
  • Use the app deletion control on the edit page to remove my-data-app.
  • Return to /-/apps.

You should no longer see my-data-app in the apps list. The saved interface is now removed.

  • Switch back to the terminal from earlier.
  • Press Ctrl+C to stop the Datasette server.
  • Use your operating system's file manager to locate my-data.db in the folder where you created it.
  • Delete my-data.db from that folder.

You should no longer see my-data.db in that folder. Datasette and the datasette-apps plugin remain installed for other local projects.

Nice Work!

Nice Work!

You did it! Your Datasette app now turns rows from your SQLite database into a filterable card view that updates with your data.

You've learned how to:

  • Create your own SQLite database with an items table that stores data you can update.
  • Turn AI-generated HTML into a filterable card-view app that retrieves live rows through datasette.query().
  • Confirm live data updates by adding a test row to items. Refine the saved app through its browser-based editor.
  • Complete an optional Secret Mission to push your database app skills further.

Ready to quiz yourself?