Simo Framework

@import[components/simoside.html]

Example Code in Simo

Below is a simple counter written with Simo.

Run

simoCounter.html

partial.oncreated('.simocomponent.simoheader', function () { thisid.setdark = function () { thisid.editor = ace.edit("editor"); thisid.editor.setTheme(document.documentElement.classList.contains("dark") ? "ace/theme/twilight" : "ace/theme/chrome"); thisid.editor.session.setMode("ace/mode/html"); } thisid.setdark(); $('#themeToggle').click(() => { thisid.setdark(); }) thisid.editor.setValue(` <button onclick="thi---sid.count++" class="bg-blue-500 font-bold p-4 rounded-lg text-2xl text-white "> count is @---{th---isid.count??0} </button> `.replaceAll('///', '').replaceAll('---', ''), -1) $('#output').html(`<h5>Click the "Run" button to view. </h5>`) })

index.html

"Please wait a moment..."

How does it work?

First, create a basic index.html file and include the Tailwind and Simo libraries in it using the following code:

tailwindcss

@norender

Simo

@norender

The work is complete, now you can use Simo codes.

index.html

@norender <---!DOCTYP---E html>

Document

Use the <simo> tag anywhere in the master page to directly utilize Simo commands (there's no need to use this tag within Simo components).

Running the Project:

1. First, install the StaticServer extension in VS Code.

Terminal Vs Code

@norender code --install-extension gaogeek.staticserver

2. Open the index.html file and run the staticserver

keys

@norender Ctrl+Shift+Enter

http://localhost:9527/index.html