TypoGenie Templates

This folder contains all the document style templates for TypoGenie. Templates are organized by category.

Creating Custom Templates

You can create your own templates! Just create a JSON file with the following structure:

{
  "id": "my-custom-style",
  "name": "My Custom Style",
  "category": "Custom",
  "description": "A brief description of this style",
  "vibe": "Keywords describing the mood",
  "googleFontsImport": "https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap",
  "wordConfig": {
    "heading1": {
      "font": "Your Font",
      "size": 28,
      "color": "000000",
      "bold": true,
      "align": "left",
      "spacing": { "before": 400, "after": 200, "line": 240 }
    },
    "heading2": {
      "font": "Your Font",
      "size": 14,
      "color": "333333",
      "bold": true,
      "align": "left",
      "spacing": { "before": 280, "after": 140, "line": 240 }
    },
    "body": {
      "font": "Your Font",
      "size": 11,
      "color": "333333",
      "align": "left",
      "spacing": { "before": 0, "after": 180, "line": 300 }
    },
    "accentColor": "FF5733"
  },
  "previewCss": "font-family: 'Your Font', sans-serif; h1 { font-size: 28pt; font-weight: 700; color: #000; margin-bottom: 20px; }"
}

Template Structure

Required Fields

id: Unique identifier (lowercase, no spaces)
name: Display name for the UI
category: Category for grouping (e.g., "Minimalist", "Editorial", "Tech")
description: Short description shown in the UI
vibe: Keywords describing the style
googleFontsImport: URL to import fonts from Google Fonts
wordConfig: Configuration for Word document generation
previewCss: CSS for the preview pane

Word Config Options

For each style (heading1, heading2, body):

font: Font family name (must match Google Fonts import)
size: Font size in points
color: Hex color without # (e.g., "000000")
bold: true/false
italic: true/false
underline: true/false
allCaps: true/false
smallCaps: true/false
tracking: Letter spacing in twips (1/20 of a point)
align: "left", "center", "right", "both" (justify)
spacing: Object with before, after, and line (all in twips)
border: Optional border configuration
shading: Optional background shading

Where to Place Templates

For Personal Use (Recommended)

Place templates in the user data folder:

Windows: %APPDATA%/TypoGenie/TypoGenie-Data/templates/
macOS: ~/Library/Application Support/TypoGenie/TypoGenie-Data/templates/
Linux: ~/.config/TypoGenie/TypoGenie-Data/templates/

Or use the "Open Templates Folder" button in the app.

For Distribution

Place templates in this folder (src-tauri/templates/) organized by category subfolders, then rebuild the app.

Tips

Test your template with various content types (headings, lists, code blocks, etc.)
Ensure the Word config and preview CSS match for consistency
Use web-safe fonts or Google Fonts for best compatibility
Colors should be hex without the # prefix in wordConfig
Colors should be hex WITH the # prefix in previewCss

3.5 KiB Raw Blame History