🧩 Component Gallery

Welcome, lowcoder! Every interactive component you can use in your .md pages.

The rule of the game: you only write markdown. Components activate via {: .class } — an IAL tag on the line after a fenced block or link. No HTML, no CSS, no JavaScript needed!

### 🗺️ Component Map
[Browse](/docs/components)
{: .sitemap path="docs/components" height="460" }

Available components

Browse →

Feature: Component palette
    As a lazy lowcoder & learner
    I want to discover the available components
    So that I can learn and customize my app quickly with minimal prior knowledge
  Background: 
    Given the user / learner is on this package (folder) 
      or modules or subfolders)

  Scenario: Outside-in / X-Rays
    Given I am on a component doc page 
    When I explore with x-rays feature
    Then I can preview the inner structure and connections between blocks

  Scenario: Outside-in
    Given a module
    When I visualize and edit the source (SSOT) 
    Then I can see only  blocks
      with simple markdown and kramdown (IAL) 
      and some blocks and fences in yaml, python and csv
    And IAL have simple names, with pythonistic #id and knob names,
      and knobs have obvious default values
    And ids are written as #snake_case and auto-assigned (#component_01,
      #component_02 …) when omitted — so an author is never forced to set one;
      they add an explicit #id only to address a block from elsewhere
      (bind=, links, self.page.<id>)
    And there is no js, html, css

  Scenario: from the future
    Given a module 
    When in preview or run it
    Then I can see first the Why — a simple, engaging hook (a relatable question), before any mechanics
     And an example that illustrate the need
     And the way to create and customize it
     And the reference of all knobs
     And be able to test my knowledge with funny quizzes
     And my persistent score is displayed (and stored in localStorage)
     And there are hidden features (except for feature.md), each in User Story
       + Given/When/Then format and co-located beside the demo it describes,
       that the runtime actually runs to compute a real (not just declared)
       status, tagged by theme (ui, spec, data, code, etc) — those tags
       showing on the folder cards, and every feature listing in the page
       editor's Features tab
    
  Scenario: Bottom-up
    Given a module 
    When in preview or run it
    Then I can see easily join other related components and examples

🧠 Quick check

Q: Every component on this site activates the same way. How?

A 600-line config file and a quiet prayer.
npm install everything.
You email the maintainer and wait by the phone.
One kramdown IAL — {: .class } on the line after a block. No HTML, no JS.