Skip to main content

📦 Ouasl Builder Documentation

Build. Assemble. Ship templates.

Learn how to create reusable sections that the Ouasl builder merges into complete, production-ready templates — in minutes, not days.

Get Started →Quick Start

7Topic categories

3File structure

2Languages

<link rel="stylesheet" href="./style.css" />

<section id="hero" data-name="hero" data-tag="section">
  <div class="container">
    <div class="wrapper">
      <h1>Welcome to Ouasl</h1>
      <p>Build reusable templates from modular sections.</p>
      <a role="button" href="/signup" data-hover="true">
        Get started
      </a>
    </div>
  </div>
</section>

<script src="./index.js"></script>

section3 files → one template

✨ NEW — AI-Powered

From Figma design to Ouasl template
in under a minute.

Paste a Figma URL, click Run, and the AI Pipeline generates a complete, builder-compliant template — HTML, CSS, JavaScript, and images — ready to upload. No copy-paste from the docs required.

⚡Seconds per section, not hours
✅Every rule in the docs, applied automatically
🎯Ready-to-upload ZIP output

Open AI Pipeline ↗How it works

FigmaDesign the frame

🤖

AI PipelineReads + generates

Ouasl TemplateReady to upload

Avg. generation time: under 60 seconds

Why use this docs

Designed to get you shipping faster

Three pillars that make writing a Ouasl-compliant section feel effortless — even for first-time contributors.

Easy to Read

Build templates quickly with simple, clear instructions and copy-paste examples.

Flexible Structure

Create any type of section — forms, sliders, videos, maps, and more — using one consistent rulebook.

Developer Friendly

Follow clear rules with examples and ready-to-use sections for every part of the builder.

Everything you need

Documentation, organized by topic

Eight categories that walk you through every rule the Ouasl builder enforces — from the AI pipeline that generates a template to the final form submission.

AI Pipeline

Turn a Figma design into a ready-to-upload Ouasl template — no hand-coding needed.

HTML Structure

Root tags, attributes, containers, wrappers and the built-in element rules.

Media

Embed YouTube, Vimeo and Dailymotion videos, Google Maps and Swiper sliders.

Components

Ready-to-use patterns: responsive headers, FAQ accordions, countdown timers.

Forms

Every input type, special leads fields, and how form data reaches the dashboard.

JavaScript

Scoping rules, DOM selection, variable declarations — no collisions across sections.

CSS & Styling

Scoped selectors, color palette variables, responsive breakpoints and hover states.

Tools

Interactive helpers — generate unique form IDs right inside the docs.

Let's build

Ready to build your first section?

A minimal copy-paste example. You'll see something real on screen in under two minutes.

my-section / index.html + style.css + index.js

Start the Quick Start →Generate a Form ID

⏱️ 2 min setup•📦 Zero config•🎯 Production-ready