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

To start using Realm, you only need a text editor (like Vim or VSCode), a web browser, and there’s no need for a localhost setup (unless you’re using the import-element tag).

Getting started is a breeze! Just follow these simple steps:

  1. Create a new HTML file.

  2. Add the necessary scripts and styles from a CDN inside the <head> tag of your HTML file.

  3. Double-click the HTML file to open it in your web browser.

That’s it! You’re now ready to dive into Realm.

CDN Installation

Add the following code to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/@realmorg/realm/dist/realm.production.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@realmorg/realm/dist/realm.min.css"
  rel="stylesheet" />

With Realm installed, let’s create your very first custom element. Let’s get started!