Quick Start

Introduction

Welcome to Ritmin! This guide will help you set up and run your first application using our framework in just a few minutes.

Prerequisites

Before you begin, make sure you have the following tools installed:

• Node.js

• npm or yarn

• A text editor (such as VS Code)

Installing the Framework

To install Ritmin, open your command line and use one of the following commands:

npm install ritmin --save

or

yarn add ritmin

Setting Up the Project

1. Create a new directory for your project:

mkdir my-ritmin-app
cd my-ritmin-app

Initialize a Node.js project:

npm init -y

Install Ritmin if not already installed:

npm install ritmin --save

Creating the Main File

Create an index.ts file in your project directory and add the following code:

import {CreateElement} from 'ritmin';

const app = CreateElement;
 // 
app.revise(
  'div',
  {
    id: 'container',
    className: 'my-container',
    style: 'background-color: lightblue; padding: 20px;',
    content: 'This is the internal content of the element',
  },
  [
    {
      tag: 'p',
      content: 'This is the inner paragraph of the element',
    },
    {
      tag: 'button',
      attributes: { onclick: 'alert("Button clicked!")' },
      content: 'Press here',
    },
  ]
);

CreateElement.update('container', { backgroundColor: 'lightgreen' });

Running the Application

To run the application, use the following command:

tsc index.ts

Result

After executing the code, the expected result in the HTML document will be:

<div id="root"></div>
  <div id="container" class="my-container" style="background-color: lightgreen; padding: 20px;">
     This is the internal content of the element
    <p>This is the inner paragraph of the element</p>
    <button onclick="alert('Button clicked!')">Press here</button>
  </div>

Next Steps

Congratulations! You have successfully run your first application using Ritmin. For more information, check out:

• Tutorials

• API Guide