Example

Below is a collection of examples. These examples are development only and are not included in the packaging process.

🧱 Synticore Features

Core demonstrations that showcase built-in Synticore capabilities and project architecture.

Primary pages that should always be present in a build (not just development examples).

Examples related to URL routing, default documents, and how paths resolve to pages.

Directory Index (index.html default)
- Demonstrates index fallback and path resolution.

Content-formatting demos including blog markup, markdown, and entity handling.

File Include
- Demonstrates reusable HTML includes and template composition.
HTML Comment Tags
- Shows special comment directives used by the compiler.
Markdown
- Demonstrates markdown rendering and supported content patterns.
SVG Include
- Demonstrates reusable SVG includes and inline rendering.
Table of Contents
- Demonstrates heading hierarchy, anchor linking, and TOC numbering in the HTML pipeline.

Examples for image processing, galleries, slideshows, and media assets.

Brand + Favicon Pipeline
- Shows icon generation and brand asset output behavior.
Image Interlace
- Compares interlaced and non-interlaced image loading behavior.
Image Variant
- Demonstrates generated image sizes and variant naming.
Image Watermark
- Shows watermark processing and resulting output files.

Font loading and icon system demonstrations (CSS + SVG).

Browser capability and runtime data inspection examples.

Developer-focused pages for syntax highlighting and code presentation.

Handlebars
- Shows template compilation and helper-driven output.
Syntax Highlight - Live (via Prism Live)
- Demonstrates interactive live code highlighting.
Syntax Highlight - Static (via Prism)
- Demonstrates static code highlighting behavior.

General web content demos that are useful references but not specific to Synticore internals.

Pages that demonstrate structural page behavior such as sticky regions and long-document flow.

Aspect Ratio
- Demonstrates fixed-ratio containers and media framing.
Grid
- Demonstrates responsive grid layout usage.
HTML Sticky Element
- Demonstrates sticky table and heading behavior in long content.
Inline Block List
- Shows inline list layouts and wrapping behavior.
Page Length
- Combined demo for long-page scrolling and short-page sticky footer behavior.
Scroll Indicator
- Shows viewport/page progress indicator behavior.

Content-focused examples including formatting systems, entities, galleries, and slideshows.

HTML Character Escaper
- Demonstrates escaping raw HTML content into safe text output.
HTML Entities
- Reference table for common HTML entities.
HTML Table
- Demonstrates accessible, responsive, sortable, and exportable table patterns.
HTML Unicode Character Table and Keyboard
- Demonstrates searchable Unicode character references and keyboard input helpers.
Photo Gallery
- Shows gallery behavior, lightbox flow, and media presentation.
Slideshow
- Demonstrates slideshow behavior and controls.
Style
- Style reference page for common rendered elements.

Interactive demos for user input patterns and responsive notices.

Calendar
- Demonstrates a project calendar with monthly stats and status bars.
Contact Form
- Demonstrates contact page structure and form integration points.
Interactive Disabled Input
- Shows disabled input interaction and visual feedback.
Password Interface
- Demonstrates custom password visibility, shift, and caps-lock indicators.
Responsive Cookie Notice
- Demonstrates responsive cookie notice behavior and layout.

Visual effect demos focused on backgrounds, overlays, and presentation behavior.

Animated Background Hearts
- Demonstrates animated hearts background behavior.
Animated Background Snowfall
- Demonstrates animated snowfall background behavior.
Backdrop Filter Blur
- Shows blur/glass effects and browser support checks.
BG Pattern
- Demonstrates reusable patterned backgrounds.
Chartist Graph
- Demonstrates responsive line chart rendering with Chartist.
Drop Shadow
- Demonstrates multiple shadow effects and corner treatments.
Interactive 3D Boxart
- Demonstrates pointer-responsive 3D box art transforms.
Note Style
- Demonstrates paper-style note visual treatments.
Notification
- Demonstrates multiple notification presentation styles and variants.
Overlay
- Demonstrates overlay layer behavior and stacking.
Parallax Image
- Demonstrates image parallax behavior with scroll and resize handling.

Utility-style pages for layout helpers and developer-facing tooling demos.

Debug Console
- Demonstrates an in-page log viewer for mobile-friendly debugging workflows.
JavaScript Sensor Access
- Demonstrates device motion/orientation access and sensor readouts.
Stress Test
- Demonstrates CPU/GPU stress simulation and runtime behavior.