Templates Overview

Name: Glyph
Author: Glyph

Glyph templates are pre-designed document layouts that you populate with your data. Each template includes HTML structure, CSS styling, and a data schema.

Available Templates

Glyph ships with 16 production-ready templates across 11 document categories:

Template	Description	Best For
`quote-modern`	Clean, minimal design with generous whitespace	SaaS, tech companies, agencies
`quote-professional`	Traditional business style with formal typography	Law firms, consulting, B2B
`quote-bold`	High-impact design with dark header	Creative agencies, startups
`invoice-clean`	Clear, structured invoice layout	Freelancers, small businesses
`receipt-minimal`	Compact receipt format	E-commerce, retail, POS
`report-cover`	Professional report cover page	Consulting, research, analytics
`contract-simple`	Clean contract layout with signature blocks	Legal, agreements, SOWs
`certificate-modern`	Award-style certificate with modern styling	Training, education, events
`letter-business`	Formal business letter format	Correspondence, notices
`proposal-basic`	Structured proposal layout	Sales, project proposals
`shipping-label`	Compact shipping label with address blocks	Fulfillment, logistics
`packing-slip`	Order contents summary with item list	E-commerce, warehouses
`resume`	Professional CV layout	Job applications, HR
`menu`	Restaurant/service menu layout	Food service, hospitality
`event-ticket`	Event admission ticket with QR code support	Events, ticketing
`purchase-order`	Formal purchase order document	Procurement, supply chain

Template Structure

Each template consists of:

templates/
  quote-modern/
    template.html    # HTML structure with Mustache placeholders
    styles.css       # Template-specific styles
    schema.json      # Data validation schema

HTML Template

Templates use Mustache syntax for data binding:

<h1>{{branding.companyName}}</h1>
<p>Prepared for: {{client.name}}</p>

{{#lineItems}}
<tr>
  <td>{{description}}</td>
  <td>{{quantity}}</td>
  <td>${{unitPrice}}</td>
  <td>${{total}}</td>
</tr>
{{/lineItems}}

Regions

Templates define clickable regions using data-glyph-region attributes:

<header data-glyph-region="header">
  <!-- Logo and company info -->
</header>

<section data-glyph-region="client-info">
  <!-- Client details -->
</section>

<table data-glyph-region="line-items">
  <!-- Products/services -->
</table>

Users can click these regions to target AI modifications.

Standard Regions

All quote templates include these regions:

Region	Description	Typical Content
`header`	Document header	Logo, company name, document title
`meta`	Document metadata	Quote number, date, valid until
`client-info`	Recipient info	Name, company, email, address
`line-items`	Items table	Products, services, quantities, prices
`totals`	Calculations	Subtotal, tax, discount, total
`notes`	Additional info	Special instructions, comments
`footer`	Document footer	Terms, conditions, signatures

Data Schema

Each template defines expected data using JSON Schema:

{
  "required": ["client", "lineItems", "totals"],
  "properties": {
    "client": {
      "type": "object",
      "required": ["name"],
      "properties": {
        "name": { "type": "string" },
        "company": { "type": "string" },
        "email": { "type": "string", "format": "email" }
      }
    }
  }
}

Selecting a Template

Pass the template ID to the editor or API:

Editor

<glyph-editor template="quote-professional" ...></glyph-editor>

API

const { html, sessionId } = await api.preview('quote-bold', data);

Template Customization

Templates can be customized in several ways:

1. Style Properties in Data

Some templates accept style customization via data:

{
  "styles": {
    "accentColor": "#7c3aed",
    "fontFamily": "Georgia, serif"
  }
}

2. AI Modifications

Use natural language to modify any aspect:

await editor.modify("Change the accent color to purple");
await editor.modify("Use a more formal serif font");
await editor.modify("Make the header smaller");

3. Custom Templates

Create your own templates for complete control. See Custom Templates.

Listing Templates

Get available templates via the API:

const response = await fetch('https://api.glyph.you/v1/preview/templates', {
  headers: { 'Authorization': 'Bearer gk_your_key' }
});

const { templates } = await response.json();
// [{ id: 'quote-modern', name: 'Modern Quote', ... }, ...]

Template Categories

Templates are organized by document type:

Category	Templates	Status
Quote	`quote-modern`, `quote-professional`, `quote-bold`	Available
Invoice	`invoice-clean`	Available
Receipt	`receipt-minimal`	Available
Report	`report-cover`	Available
Contract	`contract-simple`	Available
Certificate	`certificate-modern`	Available
Letter	`letter-business`	Available
Proposal	`proposal-basic`	Available
Shipping	`shipping-label`, `packing-slip`	Available
Resume	`resume`	Available
Menu	`menu`	Available
Ticket	`event-ticket`	Available
Purchase Order	`purchase-order`	Available

Next Steps

quote-modern - Detailed template reference
quote-professional - Traditional business style
quote-bold - High-impact modern design
invoice-clean - Clean invoice layout
Custom Templates - Create your own