Skip to content
Numio

JSON-LD to Framed Form — Numio

Reshapes JSON-LD with a frame using jsonld.frame: nodes matching the frame (for example by @type) become the top-level results, and the nodes they reference are embedded inside them.

Turning a flat @graph into a tree rooted at the type your application needs, such as every Book with its library embedded.

JSON-LD

Frame

Framed

When to use it

  • Turning a flat @graph into a tree rooted at the type your application needs, such as every Book with its library embedded.
  • Selecting only the nodes of one @type from a larger JSON-LD dataset.

How to use

  1. Paste the source document into the JSON-LD editor.
  2. Write the frame in the Frame editor: a @context plus matching rules such as "@type": "Book".
  3. Read the result; with more than one match the nodes are listed in @graph.

JSON-LD + frame

// JSON-LD editor
{
  "@context": {"@vocab": "http://schema.org/"},
  "@graph": [
    {"@id": "http://example.org/lib", "name": "City Library"},
    {"@id": "http://example.org/b1", "@type": "Book", "name": "Dune",
     "holdingArchive": {"@id": "http://example.org/lib"}},
    {"@id": "http://example.org/b2", "@type": "Book", "name": "Emma",
     "holdingArchive": {"@id": "http://example.org/lib"}}
  ]
}

// Frame editor
{"@context": {"@vocab": "http://schema.org/"}, "@type": "Book"}

Framed JSON-LD

{
  "@context": {
    "@vocab": "http://schema.org/"
  },
  "@graph": [
    {
      "@id": "http://example.org/b1",
      "@type": "Book",
      "holdingArchive": {
        "@id": "http://example.org/lib",
        "name": "City Library"
      },
      "name": "Dune"
    },
    {
      "@id": "http://example.org/b2",
      "@type": "Book",
      "holdingArchive": {
        "@id": "http://example.org/lib",
        "name": "City Library"
      },
      "name": "Emma"
    }
  ]
}

Details and limitations

Node references are replaced by the referenced node here: the library is embedded in each book.

A node that does not match the frame (the library) appears only as an embedded object, not as its own result.

Runs in your browser with jsonld.js using its default framing options; @embed, @explicit and similar flags can be set inside the frame itself.

FAQ

How do I return only certain properties?

Add "@explicit": true to the frame and list the properties you want, each with {} as its value.

Why is there an @graph key in the result?

When more than one node matches the frame the results are returned in @graph. A single match is returned as a top-level object.

Why is the Frame editor prefilled with a schema.org context?

It is the page's default example. That context is a remote URL your browser has to download; replace it with an inline context for offline use. If the download fails, the page shows an error naming the URL.

Specifications and references