Renderers

Transform validated JSON schema output into production-ready HTML pages.

What Is a Renderer?

A renderer is the component that transforms a page's validated JSON content into HTML. There are 8 dedicated renderers for the most common content schemas, each producing purpose-built UI components. The remaining schemas (alternatives, resource-list, tool-page, glossary, template-pack) use a generic renderer that adapts to the schema's field structure.

The rendering pipeline works like this:

1. The AI generates a JSON object matching the schema's structure
2. The validator confirms the JSON meets all constraints
3. The renderer reads the JSON and produces semantic HTML
4. The chrome system wraps the HTML in your header/footer/CSS
5. SEO infrastructure (JSON-LD, OG tags, canonical) is injected

Built-in Renderers

Dedicated Renderers

These 8 renderers are purpose-built for their content type's specific layout and interaction patterns:

Renderer	Schema	Key UI Elements
idea-list	Idea List	Numbered cards with title, description, difficulty badge
checklist	Checklist	Static checkbox markers, intro and conclusion paragraphs, item categories rolled up into the markup
how-to	How-To Guide	Step progress bar, time estimates, prerequisite list
comparison	Comparison	Feature comparison table, scoring, verdict summary
listicle	Listicle	Ranked entries with images, descriptions, and highlights
faq	FAQ	Accordion layout, FAQPage schema markup
guide	Guide	Long-form ordered sections with section headings
review	Review	Rating scores, pros/cons, verdict summary

Generic Renderer

The remaining schemas — alternatives, resource-list, tool-page, glossary, and template-pack — use a generic renderer that adapts to the schema's field structure. The generic renderer inspects the JSON fields and produces appropriate HTML sections automatically.

Renderer Anatomy

A renderer produces a complete HTML fragment that sits between your header chrome and footer chrome. The structure of a typical rendered page:

<!-- Your header chrome (from project settings) -->
<header>...</header>

<!-- Rendered content -->
<article class="contento-page">
  <h1>100 CI/CD Pipeline Ideas for 2026</h1>
  <p class="intro">...</p>

  <!-- Content items (rendered per schema type) -->
  <div class="idea-list">
    <div class="idea-card">
      <span class="idea-number">1</span>
      <h3>Implement Blue-Green Deployments</h3>
      <p>...</p>
      <span class="badge">medium</span>
    </div>
    <!-- ... more items -->
  </div>

  <!-- Internal links (injected by linking pass) -->
  <aside class="related-pages">...</aside>

  <!-- CTA (from project settings) -->
  <div class="cta-box">...</div>

  <!-- Back-link (from project settings) -->
  <a href="https://example.com">More on Example Inc</a>
</article>

<!-- Your footer chrome -->
<footer>...</footer>

Example: Checklist Renderer

The checklist renderer produces a printable, scannable page with one item per row, intro and conclusion paragraphs from the schema, and category labels rolled up into the markup:

// Input JSON (from AI generation)
{
  "intro": "Setting up a home office requires...",
  "items": [
    {
      "text": "Invest in an ergonomic chair with lumbar support",
      "category": "setup",
      "checked": false
    },
    {
      "text": "Set up a dedicated workspace away from distractions",
      "category": "setup",
      "checked": false
    }
  ],
  "conclusion": "With these items checked off..."
}

// Rendered HTML output includes:
// - One row per item with the item text and category
// - Static checkbox markers (printable, no JS)
// - Intro and conclusion paragraphs from the schema

Example: FAQ Renderer

The FAQ renderer produces an accordion layout with FAQPage structured data for Google rich snippets:

// The FAQ renderer automatically injects:
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is CI/CD?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CI/CD stands for..."
      }
    }
  ]
}
</script>

SEO Output

Every renderer injects the following SEO elements:

• Canonical URL — <link rel="canonical"> pointing to the page's permanent URL
• JSON-LD — Article and BreadcrumbList structured data (plus FAQPage for FAQ content)
• Open Graph — og:title, og:description, og:url, og:type (Twitter and most other social platforms read these as a fallback)
• Meta description — Generated from the schema's MetaDescPattern

Styling

Renderers produce semantic HTML with CSS class names that follow a consistent naming convention. Your custom CSS (uploaded via chrome settings) can override any renderer style:

Class Pattern	Description
.contento-page	Root wrapper for all rendered content
.idea-card, .checklist-item, etc.	Schema-specific item wrappers
.related-pages	Internal linking section
.cta-box	CTA injection point
.contento-backlink	Back-link component

See Chrome (Header/Footer/CSS) for how to upload custom styles.