| title | String Layout Example |
|---|---|
| siteName | StringLayouts |
This example demonstrates using pure JavaScript template literals for creating simple yet powerful layouts in DOMStack, without requiring a templating library.
String layouts use JavaScript's built-in template literals to generate HTML structures. Unlike component-based layouts that use libraries like Preact or React, string layouts work directly with strings, making them:
- Lightweight (no library dependencies)
- Easy to understand (pure JavaScript)
- Highly performant (minimal processing overhead)
The root.layout.js file in this example:
- Uses JavaScript template literals as the foundation
- Works directly with strings rather than components
- Properly handles dynamic content, scripts, and styles
- Maintains the same structure as component-based layouts
String-based layouts provide several advantages:
- Simplicity: Easy to read and understand HTML structure
- Flexibility: Direct control over HTML output
- Performance: Minimal overhead compared to complex templating systems
- Compatibility: Works seamlessly with DOMStack's page system
- No Dependencies: Reduces bundle size by avoiding templating libraries
The string layout pattern is remarkably clean:
// Template structure with tagged template literal
return /* html */`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${siteName}${title ? ` | ${title}` : ''}</title>
<!-- Other head elements -->
</head>
<body>
<div class="container">
${children}
</div>
</body>
</html>
`- Dynamic Content: Use
${variable}syntax to insert dynamic content - Conditional Content: Use ternary expressions like
${condition ? 'yes' : ''} - Repeating Elements: Use
${array.map(item => - ${item}
- Comment Hints: The
/* html */comment helps editors provide syntax highlighting
).join('')}
String layouts are ideal for:
- Simple websites with minimal dynamic content
- Projects where bundle size is critical
- Static site generation
- Beginners learning web development fundamentals
For more complex applications with extensive component reuse, consider using component-based layouts with Preact or other libraries.