Embed the Dataset Viewer in a webpage

You can embed the Dataset Viewer in your own webpage using an iframe.

The URL to use is https://huggingface.co/datasets/<namespace>/<dataset-name>/embed/viewer, where <namespace> is the owner of the dataset (user or organization) and <dataset-name> is the name of the dataset. You can also pass other parameters like the configuration, split, filter, search or selected row.

For example, the following iframe embeds the Dataset Viewer for the glue dataset from the nyu-mll organization:

<iframe
  src="https://huggingface.co/datasets/nyu-mll/glue/embed/viewer"
  frameborder="0"
  width="100%"
  height="560px"
></iframe>

You can also get the embed code directly from the Dataset Viewer interface. Click on the Embed button in the top right corner of the Dataset Viewer:

It will open a modal with the iframe code that you can copy and paste into your webpage:

Parameters

All the parameters of the dataset viewer page can also be passed to the embedded viewer (filter, search, specific split, etc.) by adding them to the iframe URL. For example, to show the results of the search on mangrove in the test split of the rte subset of the nyu-mll/glue dataset, you can use the following URL:

<iframe
  src="https://huggingface.co/datasets/nyu-mll/glue/embed/viewer/rte/split?search=mangrove"
  frameborder="0"
  width="100%"
  height="560px"
></iframe>

You can get this code directly from the Dataset Viewer interface by performing the search, clicking on the ⋮ button then Embed:

It will open a modal with the iframe code that you can copy and paste into your webpage:

Examples

The embedded dataset viewer is used in multiple Machine Learning tools and platforms to display datasets. Here are a few examples.

Open a pull request if you want to appear in this section!

Tool: ZenML

htahir1 shares a blog post showing how you can use the ZenML integration with the Datasets Viewer to visualize a Hugging Face dataset within a ZenML pipeline.

Tool: Metaflow + Outerbounds

eddie-OB shows in a demo video how to include the dataset viewer in Metaflow cards on Outerbounds.

Tool: AutoTrain

abhishek showcases how the dataset viewer is integrated into AutoTrain in a demo video.

Datasets: Alpaca-style datasets gallery

davanstrien showcases the collection of Alpaca-style datasets in a space.

App: Electric Vehicle Charge Finder

cfahlgren1 embeds the dataset viewer in the Electric Vehicle Charge Finder app.

Datasets: Docmatix

andito uses the embedded viewer in the blog post announcing the release of Docmatix, a huge dataset for Document Visual Question Answering (DocVQA).