buildHtml
baseUrl https://beautiful.scroll.pub
metaTags
editButton /edit.html
title Beautiful Scroll | The Elegant Markup Language
style.css

header
 class hero
 nav
  div Scroll
   class logo
  div
   class nav-links
   a Features
    href #features
   a Examples
    href #examples
   a Docs
    href https://scroll.pub/tutorial.html
   a Try It
    class cta-button
    href edit.html
 div
  class hero-content
  h1 Write Beautiful Documents
  p The elegant markup language that makes source code as readable as the output
  a Get Started
   class primary-button
   href https://scroll.pub/tutorial.html
main
 section
  id features
  class features
  h2 Why Choose Scroll?
  div
   class feature-grid
   div
    class feature-card
    div
     class feature-icon
     svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" path d="M14 2v6h6" path d="M16 13H8" path d="M16 17H8" path d="M10 9H8"
    h3 Clean Syntax
    p Minimal punctuation with meaningful whitespace
   div
    class feature-card
    div
     class feature-icon
     svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" path d="M12 2v4" path d="m18.364 5.636-2.828 2.828" path d="M22 12h-4" path d="m18.364 18.364-2.828-2.828" path d="M12 22v-4" path d="m5.636 18.364 2.828-2.828" path d="M2 12h4" path d="m5.636 5.636 2.828 2.828"
    h3 Extensible
    p Create custom parsers for any output format
   div
    class feature-card
    div
     class feature-icon
     svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
    h3 Readable
    p Documents stay beautiful at any scale
   div
    class feature-card
    div
     class feature-icon
     svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" path d="M13 2v7h7"
    h3 Portable
    p Compiles to HTML, Markdown, LaTeX, and more
 section
  id examples
  class code-demo
  h2 See Scroll in Action
  div
   class code-container
   pre
    class code-example
    code
     | header
     |  class hero
     |  h1 Welcome to Scroll
     |  p The elegant markup language
     | main
     |  section
     |   id features
     |   h2 Features
     |   ul
     |    li Clean syntax
     |    li Extensible
     |    li Readable
  div
   class code-output
   div
    class rendered-output
    header
     class hero
     h1 Welcome to Scroll
     p The elegant markup language
    main
     section
      id features
      h2 Features
      ul
       li Clean syntax
       li Extensible
       li Readable
footer
 div
  class footer-content
  div
   class footer-links
   a Documentation
    href https://scroll.pub/tutorial.html
   a Community
    href https://www.reddit.com/r/WorldWideScroll/
   a Blog
    href https://scroll.pub/blog
  p Created with Scroll by Breck Yunits and contributors

script.js