Playground

To see and edit the source code, select "CODE" or "EDIT" from the drop down in the upper right of each example.

Component Examples

In this section you will find a several component examples. The content of these code samples can be put into any <Component> definition.

Example 1 - ToDo MVC

🗎 DEMO 🗎 CODE 🗎 EDIT

Example 2 - Accordion Widget

🗎 DEMO 🗎 CODE 🗎 EDIT

Example 3: Search API

🗎 DEMO 🗎 CODE 🗎 EDIT

Example 4: Sortable CSV Table

🗎 DEMO 🗎 CODE 🗎 EDIT

Page Examples

In this section you will find a several full page examples.

The content of these code samples represent the entirity of an HTML file, and can be put directly into an HTML file. Note that for HTML Pages, they can be either embedded in a larger HTML file, or be the entirity of the file. For Markdown Pages, however, they must be the entirity of the file (that is, Modulo will not automatically render the Markdown page if there is other HTML content or Modulo definitions -- you will have to manually do this).

Page Example 1 - HTML Page

🗎 DEMO 🗎 CODE 🗎 EDIT

Page Example 2 - HTML Page (Static Auto-Import)

🗎 DEMO 🗎 CODE 🗎 EDIT

Page Example 3 - Markdown-HTML Page

🗎 DEMO 🗎 CODE 🗎 EDIT

Page Example 4 - Markdown-HTML Page (Static Auto-Import)

🗎 DEMO 🗎 CODE 🗎 EDIT

Page Example 5 - Markdown-HTML Page (Remote Static Auto-Import)

If CORS permits, you can even do an implicit auto-import directly from an absolute URL:

🗎 DEMO 🗎 CODE 🗎 EDIT

Continue learning with Modulo's Documentation, which has many more interactive "playground" examples...

Continue to DOCS