Learn

Render a Report in the Browser

Render a Cuddler document in the browser after the data schema and template schema both validate.

Tutorial path

Rendering in the browser, in the right order

The browser render step should feel simple because the validation work already happened earlier.

1Validate the data JSON

Confirm the input facts satisfy the Data Schema.

2Validate the template JSON

Check the render contract separately.

3Render the report

Produce the final document only after both contracts have passed.

4Review the safe output

Keep sanitization on by default and check the rendered result for the intended structure.

Rendering is the last step in the workflow, not the place where the workflow discovers missing structure.

This tutorial focuses on the last step in the workflow: turning validated JSON into a rendered report. The important part is not the act of rendering itself. It is the fact that rendering only happens after both contracts have already passed.

Rendering order

  1. Validate the data JSON against the Data Schema.
  2. Validate the template JSON against the Template Schema.
  3. Render the document only after both validations succeed.
  4. Keep sanitization on by default for untrusted content.

What to watch for

  • Text content should remain escaped.
  • Unsafe tags and event handlers should be stripped.
  • External asset handling should be intentional, not implicit.
  • Render failures should be treated as real errors, not as formatting noise.

When the result is wrong

If the output is missing content, start by checking the data shape. If the output is structured incorrectly but the data is valid, inspect the template. If the content is unsafe, review the sanitization configuration before changing the markup.