Examples

Learn Loopar by exploring practical examples. Each example shows the JSON structure and its rendered preview.

Example	Difficulty	Concepts
Basic Card	Beginner	Components, data props
Contact Form	Beginner	Inputs, validation
Blog Post Entity	Intermediate	Entities, relationships
Dashboard Stats	Intermediate	Layout, panels
CRM Contact	Advanced	Complex forms, rows/cols

Basic Card

Simple Card Component

1[
2  {
3    "element": "card",
4    "data": {
5      "title": "Welcome to Loopar",
6      "description": "Build amazing applications with drag and drop."
7    },
8    "elements": [
9      {
10        "element": "paragraph",
11        "data": {
12          "text": "Loopar is a meta-framework that lets you create full-stack applications visually."
13        }
14      },
15      {
16        "element": "button",
17        "data": {
18          "label": "Get Started",
19          "variant": "primary"
20        }
21      }
22    ]
23  }
24]

A basic card with title, content and styling.

Key Points

card: Container component with optional title and description
elements: Child components rendered inside the card
button: Action element with variant styling

Contact Form

Simple Contact Form

1[
2  {
3    "element": "card",
4    "data": {
5      "title": "Contact Us"
6    },
7    "elements": [
8      {
9        "element": "input",
10        "data": {
11          "name": "name",
12          "label": "Your Name",
13          "required": true,
14          "placeholder": "John Doe"
15        }
16      },
17      {
18        "element": "input",
19        "data": {
20          "name": "email",
21          "label": "Email",
22          "format": "email",
23          "required": true,
24          "placeholder": "john@example.com"
25        }
26      },
27      {
28        "element": "textarea",
29        "data": {
30          "name": "message",
31          "label": "Message",
32          "rows": 4,
33          "placeholder": "How can we help?"
34        }
35      },
36      {
37        "element": "button",
38        "data": {
39          "label": "Send Message",
40          "variant": "primary",
41          "type": "submit"
42        }
43      }
44    ]
45  }
46]

Form with text inputs, email validation and submit button.

Input Properties

Property	Description
`name`	Field identifier for form data
`label`	Display label
`format`	Validation type (email, phone, url)
`required`	Makes field mandatory
`placeholder`	Hint text

Blog Post Form

1[
2  {
3    "element": "input",
4    "data": {
5      "name": "title",
6      "label": "Post Title",
7      "required": true
8    }
9  },
10  {
11    "element": "select",
12    "data": {
13      "name": "category",
14      "label": "Category",
15      "options": "Technology\nDesign\nBusiness\nLifestyle"
16    }
17  },
18  {
19    "element": "text_editor",
20    "data": {
21      "name": "content",
22      "label": "Content"
23    }
24  },
25  {
26    "element": "image_input",
27    "data": {
28      "name": "featured_image",
29      "label": "Featured Image"
30    }
31  },
32  {
33    "element": "select",
34    "data": {
35      "name": "status",
36      "label": "Status",
37      "options": "Draft\nPublished\nArchived",
38      "default": "Draft"
39    }
40  }
41]

Entity structure for a blog post with category, content editor and status.

Blog Post Entity

Entity Components

select with options string: Static options separated by \n
select with entity: Use entity name to load dynamic options (e.g., "options": "Category")
text_editor: Rich text editor for content
image_input: File upload for images

Dashboard Stats

Stats Panel Row

1[
2  {
3    "element": "row",
4    "data": {
5      "class": "gap-0"
6    },
7    "elements": [
8      {
9        "element": "col",
10        "data": {
11          "size": 3
12        },
13        "elements": [
14          {
15            "element": "panel",
16            "data": {
17              "class": "bg-primary/10 p- rounded-lg"
18            },
19            "elements": [
20              {
21                "element": "title",
22                "data": {
23                  "text": "1,234",
24                  "size": "lg"
25                }
26              },
27              {
28                "element": "paragraph",
29                "data": {
30                  "text": "Total Users",
31                  "class": "text-muted-foreground"
32                }
33              }
34            ]
35          }
36        ]
37      },
38      {
39        "element": "col",
40        "data": {
41          "size": 3
42        },
43        "elements": [
44          {
45            "element": "panel",
46            "data": {
47              "class": "bg-green-500/10 p-4 rounded-lg"
48            },
49            "elements": [
50              {
51                "element": "title",
52                "data": {
53                  "text": "$45,678",
54                  "size": "lg"
55                }
56              },
57              {
58                "element": "paragraph",
59                "data": {
60                  "text": "Revenue",
61                  "class": "text-muted-foreground"
62                }
63              }
64            ]
65          }
66        ]
67      },
68      {
69        "element": "col",
70        "data": {
71          "size": 3
72        },
73        "elements": [
74          {
75            "element": "panel",
76            "data": {
77              "class": "bg-orange-500/10 p-4 rounded-lg"
78            },
79            "elements": [
80              {
81                "element": "title",
82                "data": {
83                  "text": "89%",
84                  "size": "lg"
85                }
86              },
87              {
88                "element": "paragraph",
89                "data": {
90                  "text": "Satisfaction",
91                  "class": "text-muted-foreground"
92                }
93              }
94            ]
95          }
96        ]
97      },
98      {
99        "element": "col",
100        "data": {
101          "size": 3
102        },
103        "elements": [
104          {
105            "element": "panel",
106            "data": {
107              "class": "bg-red-500/10 p-4 rounded-lg"
108            },
109            "elements": [
110              {
111                "element": "title",
112                "data": {
113                  "text": "42",
114                  "size": "lg"
115                }
116              },
117              {
118                "element": "paragraph",
119                "data": {
120                  "text": "Open Tickets",
121                  "class": "text-muted-foreground"
122                }
123              }
124            ]
125          }
126        ]
127      }
128    ]
129  }
130]

1,234

Total Users

$45,678

Revenue

89%

Satisfaction

42

Open Tickets

Dashboard layout with stat panels in a responsive grid.

Layout System

row: Horizontal container with flexbox
col: Column with size (1-12 grid system)
panel: Generic container for content
class: Tailwind classes for styling

CRM Contact Entity

Contact Form with Layout

1[
2  {
3    "element": "row",
4    "elements": [
5      {
6        "element": "col",
7        "data": {
8          "size": 6
9        },
10        "elements": [
11          {
12            "element": "input",
13            "data": {
14              "name": "first_name",
15              "label": "First Name",
16              "required": true
17            }
18          }
19        ]
20      },
21      {
22        "element": "col",
23        "data": {
24          "size": 6
25        },
26        "elements": [
27          {
28            "element": "input",
29            "data": {
30              "name": "last_name",
31              "label": "Last Name",
32              "required": true
33            }
34          }
35        ]
36      }
37    ]
38  },
39  {
40    "element": "row",
41    "elements": [
42      {
43        "element": "col",
44        "data": {
45          "size": 6
46        },
47        "elements": [
48          {
49            "element": "input",
50            "data": {
51              "name": "email",
52              "label": "Email",
53              "format": "email",
54              "required": true
55            }
56          }
57        ]
58      },
59      {
60        "element": "col",
61        "data": {
62          "size": 6
63        },
64        "elements": [
65          {
66            "element": "input",
67            "data": {
68              "name": "phone",
69              "label": "Phone",
70              "format": "phone"
71            }
72          }
73        ]
74      }
75    ]
76  },
77  {
78    "element": "select",
79    "data": {
80      "name": "company",
81      "label": "Company",
82      "options": "Company"
83    }
84  },
85  {
86    "element": "input",
87    "data": {
88      "name": "job_title",
89      "label": "Job Title"
90    }
91  },
92  {
93    "element": "select",
94    "data": {
95      "name": "lead_source",
96      "label": "Lead Source",
97      "options": "Website\nReferral\nSocial Media\nEvent\nCold Call\nOther"
98    }
99  },
100  {
101    "element": "textarea",
102    "data": {
103      "name": "notes",
104      "label": "Notes",
105      "rows": 3
106    }
107  }
108]

Complex form using rows and columns for organized layout.

Form Layout Tips

Use row + col for multi-column layouts
size: 6 = 50% width (12-column grid)
Related fields (first/last name) on same row
Full-width fields for text areas and selects
options: "Company" links to Company entity

Feature Cards Grid

Landing Page Features

1[
2  {
3    "element": "row",
4    "elements": [
5      {
6        "element": "col",
7        "elements": [
8          {
9            "element": "feature_card",
10            "data": {
11              "icon": "Zap",
12              "title": "Lightning Fast",
13              "description": "Built on Vite for instant hot reload and optimized builds."
14            }
15          }
16        ]
17      },
18      {
19        "element": "col",
20        "elements": [
21          {
22            "element": "feature_card",
23            "data": {
24              "icon": "Database",
25              "title": "Multi-Database",
26              "description": "Support for MySQL, PostgreSQL and SQLite out of the box."
27            }
28          }
29        ]
30      },
31      {
32        "element": "col",
33        "elements": [
34          {
35            "element": "feature_card",
36            "data": {
37              "icon": "Users",
38              "title": "Multi-Tenant",
39              "description": "Built-in multitenancy with isolated databases per tenant."
40            }
41          }
42        ]
43      }
44    ]
45  }
46]

Grid of feature cards with icons, titles and descriptions.

Feature Card Component

icon: Lucide icon name (Zap, Database, Users, etc.)
title: Feature heading
description: Brief explanation
Use 3-column grid (size: 4) for balanced layout