Skip to main content

Datasette plugin for rendering HTML based on JSON values

Project description


Datasette plugin for rendering HTML based on JSON values

Note that this does not currently work with Datasette master - it uses a new plugin hook that is being developed in the plugin-hook-cell - see issue 352 for details.

This plugin looks for Database values that match a very specific JSON format and converts them into HTML when they are rendered by the Datasette interface.

It currently supports two formats.


    "href": "",
    "label": "Simon Willison"

Will be rendered as an <a href=""> link:

<a href="">Simon Willison</a>


The image tag is more complex. The most basic version looks like this:

    "img_src": ""

This will render as:

<img src="">

But you can also include one or more of alt, caption, width and href.

If you include width or alt, they will be added as attributes:

    "img_src": "",
    "alt": "Kitten",
    "width": 200


<img src=""
    alt="Kitten" width="200">

The href key will cause the image to be wrapped in a link:

    "img_src": "",
    "href": ""


<a href="">
    <img src="">

The caption key wraps everything in a fancy figure/figcaption block:

    "img_src": "",
    "caption": "Kitten caption"


    <img src=""></a>
    <figcaption>Kitten caption</figcaption>

Using these with SQLite JSON functions

The most powerful way to make use of this plugin is in conjunction with SQLite's JSON functions. For example:

select json_object(
    "href", "",
    "label", "Simon Willison"

You can use these functions to construct JSON objects that work with the plugin from data in a table:

select id, json_object(
    "href", url, "label", text
) from mytable;

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Built Distribution

datasette_json_html-0.1-py3-none-any.whl (3.1 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page