dark IntroductionQuick StartRealm Mindset 01. Hello world02. Element Attributes03. Element States04. Element Flow05. Global States06. Data Bindings07. Children Rendering08. Custom Script Flow09. Reusability10. Dynamic Styles11. Events12. Conditional Rendering13. List Rendering14. HTTP Request15. The Dot Notation16. State Mutation17. Finale Server-side RenderingShadow DOM StylingASTRA StackPRO Stack
IntroductionQuick StartRealm Mindset 01. Hello world02. Element Attributes03. Element States04. Element Flow05. Global States06. Data Bindings07. Children Rendering08. Custom Script Flow09. Reusability10. Dynamic Styles11. Events12. Conditional Rendering13. List Rendering14. HTTP Request15. The Dot Notation16. State Mutation17. Finale Server-side RenderingShadow DOM StylingASTRA StackPRO Stack

What is Realm?

Realm, short for Reactive-Lightweight Markup Language, is a cutting-edge HTML framework that uses Web Components to create dynamic web apps, making it ideal for rapidly building Minimum Viable Products (MVPs). The framework relies heavily on HTML, reducing the need for extensive JavaScript.

Let’s explore a basic example to better understand Realm’s capabilities:

<custom-element name="my-element">
  <element-attr name="realm" type="string">world</element-attr>
  <template>
    I'm from the
    <strong>
      <slot name="@realm"></slot>
    </strong>
  </template>
</custom-element>

<!--
  Now you can use or reuse element anywhere in the page,
  as many as you want.
-->
<my-element></my-element>
<my-element realm="universe"></my-element>

The codes above will render:

world , ,

Realm empowers you with the simplicity of HTML, eliminating the need for additional tools, bundlers, or compilers. You can easily inspect the source code or elements to see how it works.

In the Learn sections, we will explore Realm’s functionality, including its reactivity, reusability, styling options, and other notable features.

Why Choose Realm?

Realm is tailor-made for indie makers seeking rapid prototyping capabilities. It’s the perfect solution for quickly bringing your ideas to life. However, for complex applications, you might want to consider alternative options. 🤷🏻‍♂️

While Realm excels in enabling fast prototyping, it’s also capable of supporting production-ready applications, as demonstrated by this website.

To gain insight into the motivations behind building this framework, I’ve written an article about ”HTML Developer Manifesto,” which delves into the minds that drove the creation of Realm.

Need help?

If you have any questions or need assistance, please don’t hesitate to start a discussion on Github Discussions.