Document Theme Builder

Document Setup

Design

Output

Theme Overview

Sections

Content sections added

Feature Boxes

Interactive features

Assets Used

Images uploaded

Completion

30% Complete

Quick Actions

Theme Templates

Load a pre-configured template to get started quickly:

☁️ Learneris Theme Management

Save and manage your themes in the Learneris platform. Configure your Auth Token in Settings first.

Create/Save Theme

Theme Name

This name will be used to identify your theme in the Learneris platform

Operation

Theme ID *Required

Theme Type

Create a new theme in the Learneris platform via API.

Load Organization Themes

Click "Refresh" to load themes from your organization

Getting Started

1. Fill in document info in the 📄 Document tab
2. Add content sections in 📝 Content
3. Upload images in 🗂️ Asset Library
4. Map icons & colors in 🎨 Component Design
5. Customize colors in 🎨 Styling
6. Export to Word in 💾 Export

🎨 Quick Start

Load a sample template preset with content and styling pre-configured.

Load Locally: Quick preview without Learneris
Upload to Learneris: Create theme + upload all assets (requires API config)

📤 Import from DOCX

Upload a .docx file to automatically extract content, images, and styling.

Document Information

Component Name

Unit Number

Unit Title

Unit Info Position Choose where unit info appears based on your template design

Subject

Level

Lesson Number

Lesson Title

Main Content

Curriculum Alignment Text

Sections

Add content sections (Introduction, Warm Up, etc.)

Section Type

Feature Boxes

Theme Asset Mapping

Select assets from your organization's library to use in this theme. Upload new assets in the 🗂️ Asset Library tab.

Header Banner Image

Full-width decorative banner that appears at the top of the document ABOVE all header text. Recommended height: 80-100px.

Logo Image

Brand logo (appears in header top-right). Recommended size: 80-120px wide, transparent background.

Header Text Positioning

Position the header text to overlay on the banner image. Adjust these values to place text in the white area of your banner.

Text X Offset (px) - Horizontal Position

Text Y Offset (px) - Vertical Position

Text Area Width (%)

Footer Graphic

🧪 Development Testing

Loads the 12 PNG images from attached_assets folder for testing Word export with real images.

Section Icons

Select icons from your library for each section type

📖 Introduction

💡 Warm Up

🎓 Let's Learn

❓ Questions

⭐ Key Points

Feature Box Icons

💡 Did You Know

📌 Tips

✅ Remember

🔑 Key Points

📝 Teacher's Notes

Feature Box Background Colors

Customize the background color for each feature box type to match your brand.

Custom Section Icons

Upload custom section icons to your organization library first (in 🗂️ Asset Library tab with type "section_icon"), then browse and select them here.

Global Color Palette

Define your document's color scheme. These colors will be applied consistently throughout the preview and exported document.

Primary Color (Brand identity, main headings)

Accent Color (Highlights, buttons)

Heading Color (Section titles)

Body Text Color (Paragraph text)

Background Color (Overall document background)

Border Color (Lines, dividers)

Typography

Font: Open Sans, 11pt, Line spacing: 1.4

Body Font Size (pt)

Line Height

Auto-number subsections

When enabled, subsections display hierarchical numbers like "1.1 Title", "2.3.1 Title"

📖 Typography Hierarchy Guide

Font Sizes (all scale based on Body Font Size setting above):

Section Title	18pt (fixed)	← Heading Color
`## Heading`	16.5pt	← Heading Color
`### Heading`	14.3pt	← Heading Color
`#### Heading`	12.1pt	← Heading Color
Body text	11pt	← Body Text Color
`bold`, `italic`	11pt	← Body Text Color
`- Lists`	11pt	← Body Text Color

💡 Tip: Content fields support markdown formatting. Preview and Word export match exactly!

Footer Settings

Page Number Alignment

Position of page numbers in the footer

Page Number Text Color

Text color for page numbers (adjust for visibility against footer background)

Export Name

Name for the exported file (does not affect theme in Learneris)

Export Options

🔑 Include Answer Keys in Export

When checked, correct answers will be shown in the exported document (for teacher's edition)

✅ DOCX Export: Generates Word documents with all uploaded images embedded, proper styling, colors, and formatting. All decorative graphics, section icons, and feature box images are included.

Theme Configuration

Save this JSON in your database

Import Theme

Organization Asset Library

Upload, view, search, and manage all assets in your organization's library.

Current Organization: Not configured

Current Theme: None loaded

💡 Assets uploaded here will be added to this organization's library. Configure in 🚀 Learneris Settings.

📤 Bulk Upload Assets

Choose multiple images to upload to your organization

Load all assets from your organization

🔍 Search Assets

🏷️ Filter by Type

⚙️ Application Settings

⚠️ Security Notice - Testing Only

This Settings tab is for standalone testing only.
When embedded in Learneris (production), the app auto-configures and uses secure Bubble session cookies.
⚡ Never use this Settings tab in production - API tokens stored here are visible in browser DevTools!

🌐 Backend Configuration (Standalone Mode Only)

ℹ️ Auto-Configured for Learneris
When running on Replit, the app automatically points to https://ai.learneris.com for testing.
You only need to override this if testing against a different environment (e.g., staging).
In embedded mode (production), this field is ignored - auto-configuration is used instead.

🔀 API Version

Select which Bubble API version to use. Default: Test. This affects all API endpoint URLs.

Backend URL Override (Optional - Advanced)

Default on Replit: https://ai.learneris.com. Only set this if testing against a custom environment.

🔐 Authentication (Standalone Mode Only)

ℹ️ For Testing Learneris Integration
When testing in standalone mode (Replit), you can provide an authorization token and organization ID to call Learneris workflows.
In embedded mode (production), these fields are ignored - Bubble session cookies and user context are used instead.

Authorization Token (Required for Standalone)

Required for testing Learneris workflows from standalone mode. Leave empty when embedded.

Organization ID (Required for Standalone)

Required for theme and asset management. In embedded mode, this is auto-loaded from user context.

AI Analysis Configuration

ℹ️ Legacy Bubble Workflow URL
This field is kept for backward compatibility. In the new dual-mode system, AI analysis uses the auto-generated chat-complete_v2 endpoint shown above.

Bubble Workflow URL (Legacy)

Optional: Custom URL for AI analysis (overrides auto-generated endpoint)

📋 Current Configuration

Loading configuration...

Sections

Feature Boxes

Assets Used

Completion

🎨 Quick Start

📤 Import from DOCX

⚠️ Security Notice - Testing Only

🔑 Answer Key Summary