JSON-LD to Framed Converter
Paste a JSON-LD document and a frame to reshape the document into the exact structure the frame describes. Free online developer tool.
Paste JSON-LD Document
Paste Frame
Framed JSON-LD
Framed output will appear here...
Free JSON-LD to Framed Converter
Paste a JSON-LD document and a frame to reshape the document into the exact structure the frame describes — matching by type and property, then rebuilding a document in that shape. Runs entirely in your browser using the official jsonld.js reference implementation.
How to Use It
Paste a JSON-LD document into the first box and a frame into the second, or click "Load Example" to see a working pair. Framing matches nodes in your document against the constraints in the frame (required properties, specific @type values, or specific property values) and rebuilds a document containing only the matching branches, arranged in the shape the frame specifies.
Example
The sample frame requires a name property to be present, which the sample document satisfies — framing returns the document with name and homepage intact under the frame's own context. Change the frame to require a property your document doesn't have, and the result comes back empty, since framing only keeps nodes matching every constraint.
Common Use Cases
- Pulling out only the nodes of a specific type from a larger, mixed JSON-LD document.
- Forcing a predictable, consistent output shape for downstream code that expects fixed field order.
- Filtering a document down to only the properties a frame explicitly asks for.
- Re-nesting a flattened document back into an embedded structure for display purposes.
FAQs
What does a JSON-LD frame do?
A frame is a JSON-LD document (or document with a @context) that describes the shape you want the output in — which node type or properties must be present, and what order/nesting to arrange matching nodes. Framing matches your input document against the frame's pattern and rebuilds a document in that shape, filling in only the branches that matched.
Why did framing return an empty result / just the context?
Framing only includes nodes that match every constraint in your frame — if you require a specific @type, a specific property to exist, or a specific value, only nodes satisfying all of it are used, and everything else is dropped silently. If you get back an empty (or nearly empty) result, double-check that the property names and values in your frame actually match what's in your document — for instance, a frame requiring "@type": "http://schema.org/Person" won't match anything unless your document actually sets that type on a node.
Does this tool support remote @context URLs (like https://schema.org/)?
No — this tool intentionally disables network fetches for @context and document dereferencing, since a static, client-side tool can't reliably rely on a remote server's CORS policy or availability. Use a document and frame with an inline @context object (a JSON object, not a URL string) — the sample above works this way. If either your document or your frame has a @context that's a URL, you'll get a clear error instead of an unpredictable network failure.
Is my document uploaded anywhere?
No — all JSON-LD processing happens entirely client-side in your browser using the jsonld.js library. Nothing you paste is sent to a server.