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.
config Merge branch 'master' of Jul 16, 2019
documentation Fix #85 by moving demo in a separate subfolder + improved README Jun 14, 2019
sparnatural-demo-dbpedia multilingual dbpedia demo Jul 16, 2019
sparnatural-demo-openarchaeo Merge branch 'master' of Jul 16, 2019
.gitignore #43 git : non ignorer le dossier des icons de boutons Jan 22, 2019
LICENSE Fix #85 by moving demo in a separate subfolder + improved README Jun 14, 2019 Rename into Sparnatural Apr 26, 2019

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.

You can play with an online demo at

Getting Started

To get started :

  1. Read the following documentation;
  2. Look at how things work in file sparnatural-demo-dbpedia/index.html;
    1. Attention : make sure you open this open through a web server, e.g. http://localhost/sparnatural-demo-dbpedia/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 files are written under sparnatural-demo-dbpedia/config/spec-search.json and sparnatural-demo-openarchaeo/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 for 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...

SPARQL endpoint needs to be CORS-enabled

To send SPARQL queries to a service that is not hosted on the same domain name as the web page in which Sparnatural is included, the SPARQL endpoint needs to allow Cross-Origin Resource Sharing (CORS).


Specification of classes and properties

The component is configurable using a JSON(-LD) ontology file. Look at the specification files under the config folders of the demos to get 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 in the demos folder to see how the component is integrated in a webpage.

Map the query structure to a different graph structure

to be written

Do something like this :

      var expand = function(sparql, specs) {
        $.each( specs['@graph'], function( key, val ) {
          if ( val['@type'] == 'ObjectProperty' || val['@type'] == 'Class') {
            if ( val['path'] != null) {
                var re = new RegExp("<" + val['@id'] + ">","g");
                sparql = sparql.replace(re, val['path']);
        }) ;
        return sparql ;

(this should be included in the code of Sparnatural itself.)

You can’t perform that action at this time.