93 downloads this week        Star



PyPI Changelog Tests License

Extremely experimental Datasette output plugin using CSS properties, inspired by Custom Properties as State by Chris Coyier.

More about this project: APIs from CSS without JavaScript: the datasette-css-properties plugin


Install this plugin in the same environment as Datasette.

$ datasette install datasette-css-properties


Once installed, this plugin adds a .css output format to every query result. This will return the first row in the query as a valid CSS file, defining each column as a custom property:

Example: produces:

:root {
  --pk: '1';
  --name: 'The Mystery Spot';
  --address: '465 Mystery Spot Road, Santa Cruz, CA 95065';
  --latitude: '37.0167';
  --longitude: '-122.0024';

If you link this stylesheet to your page you can then do things like this;

<link rel="stylesheet" href="">
.attraction-name:after { content: var(--name); }
<p class="attraction-name">Attraction name: </p>

Values will be quoted as CSS strings by default. If you want to return a "raw" value without the quotes - for example to set a CSS property that is numeric or a color, you can specify that column name using the ?_raw=column-name parameter. This can be passed multiple times.

Consider this example query:

  '#' || substr(sha, 0, 6) as [custom-bg]
order by
  author_date desc

This returns the first 6 characters of the most recently authored commit with a # prefix. The .css output rendered version looks like this:

:root {
  --custom-bg: '#97fb1';

Adding ?_raw=custom-bg to the URL produces this instead:

:root {
  --custom-bg: #97fb1;

This can then be used as a color value like so:

h1 {
    background-color: var(--custom-bg);


To set up this plugin locally, first checkout the code. Then create a new virtual environment:

cd datasette-css-properties
python3 -mvenv venv
source venv/bin/activate

Or if you are using pipenv:

pipenv shell

Now install the dependencies and tests:

pip install -e '.[test]'

To run the tests: