Skip to content
Sparnatural : javascript visual SPARQL query builder
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Sparnatural - A natural way of building SPARQL queries

Sparnatural is a visual SPARQL query builder written in javascript.

It supports the creation of basic graph patterns with the selection of values with autocomplete search or dropdown lists. It can be configured through a JSON-LD ontology file that defines the classes and properties to be presented in the component.

Getting Started

To get started :

  1. Read the following documentation;
  2. Look at how things work in file index.html;
    1. Attention : make sure you open this open through a web server, e.g. http://localhost/sparnatural/index.html, and not by opening the file directly in your browser (file://...), otherwise the loading of component specification fails and your will get a blank page;
  3. Look at how the specification file is written under config/spec-search.json;


Query Structure

Basic query pattern

Select the type of entity to search...

... then select the type of the related entity.

In this case there is only one possible type of relation between the two "studied by", so it gets selected automatically. Then select a value for the related entity, in this case in a dropdown list :

Congratulations, your first SPARQL query criteria is complete !

Now you can fetch the generated SPARQL query :


This enables to navigate the graph :


Combine criterias :


Select multiple values in a criteria

Values selection

Sparnatural offers currently 4 ways of selecting a value for a criteria : autocomplete field, dropdown list, simple string value, year range.

Autocomplete field

Dropdown list

String value (text search)

Year range


Sparnatural is multilingual and supports displaying labels of classes and properties in multiple languages.


Only basic graph patterns, no UNION, OPTIONAL, BIND, etc.

Sparnatural produces only basic graph patterns with VALUES. It does not support the creation of UNION, OPTIONAL, SERVICE, BIND, etc...


Specification of classes and properties

The component is configurable using a JSON(-LD) ontology file. Look at the specification files under the config folder to get you an idea. The file contains :

Class definition

      "@id" : "",
      "@type" : "Class",
      "label": [
          "@value" : "Site",
          "@language" : "en"
          "@value" : "Site",
          "@language" : "fr"
	  "iconPath":  "assets/icons/noir/site.png",
	  "highlightedIconPath":  "assets/icons/blanc/site.png"

Property definitions with domains and ranges

      "@id" : "",
      "@type" : "ObjectProperty",
      "label": [
          "@value" : "found in",
          "@language" : "en"
          "@value" : "trouvé dans",
          "@language" : "fr"
      "domain": "",
      "range": {
        "@type" : "Class",
        "unionOf" : {
          "@list" : [ 
            { "@id" : ""},
            { "@id" : ""},
            { "@id" : ""}
      "widget": {
        "@type" : ""

Using font-awesome icons

It is possible to directly use font-awesome icons in place of icons embedded in your application :

"iconPath":  "<span style='font-size: 170%;' >&nbsp;<i class='fas fa-user'></i></span>",

How to integrate Sparnatural in a webpage

Have a look at index.html to see how the component is integrated in a webpage.

You can’t perform that action at this time.