Validating Your Template
Before submitting your template, run the validation script to ensure it meets all platform requirements. Templates that fail validation will be automatically rejected.
Running validation
npm run validate -- --template your-template-nameThe validator checks your template against a comprehensive set of rules and outputs a pass/fail report.
What the validator checks
Manifest validation
| Check | Description |
|---|---|
| Schema validity | template.manifest.json matches the required JSON schema |
| Required fields | id, name, version, description, author, category, pricing, i18n are present |
| ID match | id field matches the template directory name |
| Version format | Valid semantic version (e.g. 1.0.0) |
| Category value | One of: bold, elegant, minimalist, vibrant, wellness |
| Pricing type | One of: free, free_with_attribution, standard, exclusive |
| RTL supported | i18n.rtlSupported is true |
| Tested locales | Array includes at least "en" |
File structure validation
| Check | Description |
|---|---|
| Required files | template.manifest.json, template.css, index.ts, thumbnail image |
| Header component | Header/Header.tsx exists |
| Footer component | Footer/Footer.tsx exists |
| Loading component | Loading/Loading.tsx exists |
| Required pages | pages/home/, pages/about/, pages/login/ directories exist |
| CSS modules | Each component has a co-located .module.css file |
Export validation
| Check | Description |
|---|---|
| Barrel file | index.ts exports all required components |
| Header export | Named export Header found |
| Footer export | Named export Footer found |
| Loading export | Default export found, re-exported as Loading |
| Page exports | All page components have default exports |
Image slot validation
| Check | Description |
|---|---|
| Declared | A warning when imageSlots is missing: signup cannot preview your photo spots |
| Slot ids | Each id is one of home-hero, home-about-teaser, about-hero, about-image-section, listed once |
| Required fields | page, section and field are non-empty strings |
| Ratio | ratio is width:height, e.g. 16:10 |
| Persona | persona, when set, is a boolean |
CSS validation
| Check | Description |
|---|---|
| Custom properties | template.css defines --color-accent and --color-secondary |
| Theme modes | Both [data-theme="light"] and [data-theme="dark"] sections exist |
| Font variables | --font-heading and --font-body are defined |
Asset validation
| Check | Description |
|---|---|
| Thumbnail exists | The file set in preview.thumbnail (e.g. preview/thumbnail.png) is present |
| Thumbnail size | Dimensions are 1200 × 900 pixels |
| File size | Total template package is under 10 MB |
Understanding validation output
A successful run looks like:
✓ template.manifest.json — schema valid
✓ template.manifest.json — id matches directory name
✓ template.manifest.json — rtlSupported is true
✓ Required files — all present
✓ Header — named export found
✓ Footer — named export found
✓ Loading — default export found
✓ HomeContent — default export found
✓ AboutContent — default export found
✓ LoginContent — default export found
✓ template.css — required custom properties defined
✓ template.css — light and dark theme modes defined
✓ Thumbnail — 1200x900, 320KB
Validation passed! 13/13 checks passed.A failed run shows errors with explanations:
✓ template.manifest.json — schema valid
✗ template.manifest.json — rtlSupported is false (must be true)
✓ Required files — all present
✗ Header — default export found, but named export required
✓ Footer — named export found
✗ template.css — missing [data-theme="light"] section
Validation failed. 3 errors found.Common issues and fixes
”Named export required for Header/Footer"
// ❌ You have this (default export)
export default function Header() { ... }
// ✅ Change to named export
export function Header() { ... }"Missing rtlSupported or set to false"
{
"i18n": {
"rtlSupported": true,
"testedLocales": ["en", "ar"]
}
}"Missing theme mode definitions”
Add both light and dark sections to template.css:
[data-theme="light"] {
--bg-primary: #ffffff;
/* ... */
}
[data-theme="dark"] {
--bg-primary: #0f172a;
/* ... */
}“Thumbnail dimensions incorrect”
Resize your thumbnail to exactly 1200 × 900 pixels. Use any image editor or the command line:
# Using ImageMagick
convert thumbnail.png -resize 1200x900! preview/thumbnail.pngAlways run validation locally before uploading. The upload process runs the same validation server-side, but catching errors locally saves time.
Last updated on