How is this different from Base64 to JSON?

Base64 to JSON expects just the raw Base64 string. This tool expects a full data: URI, data:application/json;base64,..., and first validates the data: scheme and application/json MIME type before decoding the payload, so it accepts exactly what the JSON to Data URI converter (and similar tools) produce, not a bare Base64 string.

Does it support percent-encoded (non-Base64) data URIs too?

Yes. If the URI's header doesn't include a base64 parameter, the payload after the comma is treated as percent-encoded text and decoded with decodeURIComponent instead of Base64, matching how data: URIs are allowed to encode their payload either way per the URI spec.

What happens if the MIME type isn't application/json?

The conversion is rejected with an error naming the MIME type that was found instead. This keeps the tool strict: a data:text/plain;base64,... or data:image/png;base64,... URI won't silently be treated as JSON.

Does the decoded payload need to be valid JSON?

Yes, after decoding the Base64 or percent-encoding, the resulting text is parsed with JSON.parse; if that fails, a specific parse error with a line and column is returned instead of returning malformed output.

Data URI to JSON Converter - Decode a data: URL Back to JSON

Overview

Introduction

A data: URI embeds a whole payload directly inside a URL, handy for small self-contained JSON used in HTML, CSS, or JavaScript source, but not directly readable until it's decoded back to text.

This tool reverses that encoding: given a data:application/json;... URI, it validates the scheme and MIME type, decodes the payload, and hands back pretty-printed JSON.

What Is Data URI to JSON Converter?

A decoder for data: URIs specifically carrying an application/json payload: it checks the URI starts with data:, extracts the MIME type and any encoding parameters from the header before the comma, and decodes the payload after the comma accordingly.

It supports both encodings a data URI can use for its payload: Base64 (when the header includes a base64 parameter) and percent-encoding (the default otherwise), then validates and formats the decoded text as JSON.

How Data URI to JSON Converter Works

The input is matched against the data:<header>,<payload> shape; a missing data: scheme or missing comma separator is rejected immediately with a clear error.

The header (everything between data: and the comma) is split on ; to get the MIME type and any parameters; the MIME type must be application/json (or absent) for the conversion to proceed.

If a base64 parameter is present, the payload is decoded with atob() into raw bytes and interpreted as UTF-8 text; otherwise it's percent-decoded with decodeURIComponent(). The resulting text is then parsed with JSON.parse and re-serialized with two-space indentation.

When To Use Data URI to JSON Converter

Use it when you have a data:application/json;... URI, pulled from HTML source, a CSS url(), or a saved link, and need to inspect or edit the JSON it contains.

It's also useful for verifying that a data URI your own code generated actually decodes back to the JSON you expect.

Often used alongside JSON to Data URI Converter, Base64 to JSON Converter and JSON Validator.

Features

Advantages

Validates both the data: scheme and the application/json MIME type before attempting to decode anything, catching the wrong kind of data URI early.
Handles both payload encodings a data URI can use (Base64 and percent-encoding), not just one.
Pretty-prints the decoded JSON immediately, so there's no separate formatting step needed.
Reports a specific line/column location for a JSON syntax error found in the decoded payload.

Limitations

Only application/json (or a MIME-type-less) data URI is accepted; any other MIME type is rejected rather than decoded anyway.
The output is always re-serialized with two-space indentation; the original payload's exact whitespace isn't preserved if it differed.
A malformed data URI (missing data: prefix, missing comma) is rejected outright rather than partially decoded.

Examples

Decoding a Base64-encoded JSON data URI

Input

data:application/json;base64,eyJuYW1lIjoiQWRhIiwicm9sZSI6ImFkbWluIn0=

Output

{
  "name": "Ada",
  "role": "admin"
}

The Base64 payload after the comma is decoded to UTF-8 text, then parsed and pretty-printed as JSON.

Best Practices & Notes

Best Practices

Use JSON to Data URI to check what a correctly formed data URI for your JSON should look like, if you're debugging one that this tool rejects.
Double-check the MIME type in the error message when a conversion is rejected; a data URI carrying a different content type won't be force-decoded as JSON.
Run the decoded output through the JSON Formatter or JSON Validator if you need a stricter or differently formatted view.

Developer Notes

The header/payload split uses a single regex, ^data:([^,]*),([\s\S]*)$, matching everything up to the first comma as the header and the rest as the payload; this mirrors the RFC 2397 data URI shape (data:[<mediatype>][;base64],<data>) without pulling in a full URI-parsing library. Base64 decoding reuses the same atob() -> Uint8Array -> TextDecoder('utf-8', { fatal: true }) pattern this category's base64-decode-json.ts uses, so malformed Base64 or invalid UTF-8 is caught rather than silently producing garbled text.

Data URI to JSON Converter Use Cases

Decoding a data:application/json;... URI found in HTML, CSS, or JavaScript source to inspect its contents.
Verifying that a data URI generated by another tool or script round-trips back to the expected JSON.
Extracting a small embedded JSON configuration from a saved link or bookmarklet.

Common Mistakes

Pasting just the Base64 portion without the data:application/json;base64, prefix; use Base64 to JSON for a bare Base64 string instead.
Expecting a data URI with a different MIME type (text/plain, application/octet-stream) to decode as JSON automatically; it's rejected instead.
Assuming the decoded output preserves the original payload's exact formatting; it's always re-serialized with two-space indentation.

Tips

If decoding fails with a MIME type error, check whether the data URI actually says application/json before the first semicolon.
For a non-Base64 (percent-encoded) data URI, no extra step is needed, the payload is percent-decoded automatically.
Use JSON to Data URI afterward to re-encode a edited JSON payload back into a data URI, if you need one.

Data URI to JSON Converter