Documentação

Featured platform

What is Qödiak? Platform Overview

Qödiak is a smart‑forms SaaS platform that lets anyone turn a simple English description into a fully functional, multi‑page web application. With AI‑generated apps, built‑in authentication, real‑time JavaScript scripting, and seamless external API integration, Qödiak bridges the gap between basic form builders and complex developer tools.

Featured platform

AI App Generation — How It Works

Qödiak’s AI App Generation lets you turn a simple English description into a fully functional, multi‑page web app in seconds. By leveraging a manifest‑first architecture and intelligent page batching, the platform builds everything from navigation to data tables, authentication, and even a custom chatbot—all previewable instantly.

AnimatedCounter

An animated number counter that smoothly counts from a start value to an end value when scrolled into view. Ideal for showcasing statistics, metrics, and impressive numbers on any site.

general

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

general

Autocomplete

Searchable combobox input with keyboard navigation (arrow keys + Enter), a filtered dropdown, and optional free‑text entry. It can use static options or load options dynamically from queries. Suitable when users must search or filter from many options (10 +). For fewer than 10 fixed options, use a Dropdown instead.

inputs

Badge

A small label or tag component used for status indicators, categories, highlights, or count displays. It supports multiple visual variants.

general

BreadcrumbNav

Breadcrumb navigation that shows the current page’s position within the site hierarchy. It displays the path from the home page to the current page and allows customizable separators. Ideal for multi‑level sites.

navigation

Button

Interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom‑script with navigation. Two visual variants are available, and the button can be enabled or disabled dynamically based on data context.

interactive

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.

general

Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with animation support.

general

Carousel

A professional carousel/slider component that automatically rotates slides, provides navigation controls, and supports customizable transitions. It can display images, text overlays, and call‑to‑action buttons, making it suitable for any site type.

general

CenterNavbar

A navigation bar that places the brand logo on the left, navigation items centered, and optional action buttons on the right. It creates a balanced, modern layout ideal for sites that want a clean, centered navigation aesthetic.

navigation

Chart

A professional data visualization component built with Recharts. It supports bar, line, pie, and area charts and offers customizable styling for dashboards, analytics, reports, statistics, progress tracking, and comparisons.

general

Chatbot

AI Chatbot component that embeds a chatbot on any page. Supports floating widget (corner bubble) or inline (embedded in page content) display modes.

advanced

Checkbox

A checkbox group component that lets users select multiple options from a predefined list. It renders a set of checkboxes with individual labels and can be arranged vertically or horizontally.

inputs

CommentThread

Displays a threaded comment list with author avatars (generated from initials), timestamps, and nested replies. Suitable for discussions, reviews, testimonial conversations, feedback sections, and social features.

general

ConfettiTrigger

Triggers a confetti explosion on page load, button click, or manually. Uses hardware‑accelerated canvas animation for celebration moments such as form‑submission success, milestone achievements, or festive events.

general

CountdownTimer

Real-time countdown timer component that displays the time remaining until a target date/time. It updates every second, offers customizable formatting, and shows a completion message when the countdown ends. Suitable for any site type.

general

DataCardGrid

A visual card‑based grid for displaying data, ideal for consumer‑facing content where visual discovery is important, such as recipes, products, portfolios, and similar collections. Use it instead of DataGrid when browsing or discovering items is the primary goal.

data-display

DataGrid

Feature-rich data grid component powered by AG Grid Community. Displays structured data from static sources or dynamic data sources (database tables or REST APIs). Supports virtual scrolling for large datasets, column resizing/filtering, CSV export, inline editing, CRUD operations, and custom JavaScript event handlers for row clicks.

data-display

DataSourceSearch

A search/filter control that connects to a page data source, typically placed above a DataGrid to provide search functionality.

advanced

Date

Date picker input for selecting dates. Provides a calendar popup on desktop and a native date picker on mobile.

inputs

DateTime

Combined date and time picker input for selecting both date and time. Provides native datetime‑local picker on most platforms.

inputs

DateTimePicker

A flexible date and time picker built with react-datepicker. It supports date‑only, time‑only, combined date‑time, and date‑range selections, with customizable formatting for any site that requires date or time input.

inputs

DecorativeDivider

Elegant decorative element displaying horizontal lines with an optional icon between them. Use above section headings to add visual polish and signal section importance. Creates the ‘--- icon ---’ pattern commonly seen in premium websites.

general

Divider

A horizontal divider line that visually separates content sections, helping to create visual hierarchy and organization.

layout

Drawer

Slide‑in side panel component with a trigger button. It slides from the left or right using a spring animation, includes an overlay backdrop, locks body scrolling, and supports keyboard accessibility. Ideal for detailed content panels, filter sidebars, navigation menus, and supplementary information.

general

Dropdown

Select dropdown for choosing one option from a predefined list. Supports static options, dynamic options from queries, and query‑centric data binding.

inputs

FAQ

An accordion‑style FAQ section featuring animated expand/collapse. It provides a clean design with configurable single‑ or multiple‑open questions. Use this component for question/answer pairs; for generic collapsible content, choose the Accordion component instead.

general

FileUpload

File upload input component allowing users to select and upload files with validation for file types, size limits, and multiple file selection.

general

Flex

A flexible layout component that uses CSS Flexbox to arrange child components horizontally (row) or vertically (column). It offers control over alignment, justification, gaps, and wrapping, and includes a default top margin of 20 px for vertical spacing.

layout

FloatingElements

Animated floating elements such as hearts, stars, sparkles, bubbles, or petals create a whimsical background layer with configurable density, speed, size, direction, and appearance, suitable for weddings, celebrations, and romantic contexts.

general

FloatingNav

A pill‑shaped navigation bar that floats at the top or bottom of the screen. It features rounded corners, a shadow, and requires an icon for each navigation item, making it ideal for modern, minimalist designs.

navigation

Footer

A responsive footer component that displays brand identity, organized link groups, social media icons, and an optional copyright notice. It supports light and dark visual variants and adapts its grid layout from mobile to desktop.

navigation

GameCanvas

Interactive HTML5 Canvas component for building games and interactive visualizations. It provides a sandboxed JavaScript execution environment with a game loop, keyboard input handling, score tracking, and high‑score persistence.

general

Grid

Responsive grid layout component that arranges child components in equal‑width columns and automatically stacks on mobile devices. It is essential for professional multi‑column form layouts and card grids.

layout

Heading

Heading text with configurable size and semantic HTML level, suitable for page titles, section headers, and establishing content hierarchy.

typography

Hero

Large banner section with heading, description, optional image, and call‑to‑action buttons. Ideal for landing pages, feature introductions, and main page banners.

general

HeroParallax

A scroll‑based parallax hero section that adds 3D rotation and translation effects. It showcases exactly 15 real portfolio items in three animated rows that move with spring physics. Intended only for portfolio, creative, or agency sites that can provide 15 fully populated items. Each item links to an internal page. Do not use on general‑purpose sites; use the standard Hero component instead.

general

HorizontalScroll

A horizontal image gallery that moves in response to vertical scrolling. The container occupies extra vertical space, so as the user scrolls down, images slide horizontally across the viewport, creating an immersive portfolio or gallery experience.

general

HoverScale

Provides a subtle zoom or lift animation on hover for images and cards. Ideal for photo‑heavy wedding sites, it creates a responsive, interactive feel using pure CSS for smooth 60 fps performance.

general

HtmlEmbed

Renders raw HTML content directly on the page. Use it for third‑party widgets, custom embeds, Calendly scheduling, Google Forms, social media embeds, custom badges, or any HTML snippet the user needs. Do not use it for videos; choose VideoPlayer instead.

media

Image

Component for displaying photos, illustrations, or graphics with configurable sizing and fit behavior.

media

ImageTabs

Accordion‑style tabs where selecting a tab reveals a description and an associated image. On desktop the image appears in a separate sticky column; on mobile images are shown inline below the descriptions. Use ImageTabs when each tab needs a visual example such as screenshots or product photos. Use regular Tabs for text‑only content.

general

Input

Single‑line text input field that supports multiple HTML input types (text, email, password, number, tel, url). It provides a label, optional placeholder, validation options, and data‑binding capabilities.

inputs

LinearCard

A draggable carousel of cards that can be swiped horizontally. Selecting a card opens an expanded detail overlay with smooth shared‑element transitions.

general

Logos

Displays a horizontal row of logos for partners, clients, integrations, or certifications. Use on landing pages to show social proof.

general

Map

An interactive OpenStreetMap/Leaflet component that supports panning, zooming, markers, and programmatic control via button scripts. It is free to use and does not require an API key.

advanced

Marquee

An auto‑scrolling content strip with CSS‑only animation. It displays testimonials or logos in a continuous loop and supports pause on hover, reverse direction, and configurable speed.

general

MegaMenuNavbar

A navigation bar with dropdown mega menus for organizing large amounts of content. Each menu item can open a multi‑column dropdown with grouped links, descriptions, and icons. Ideal for complex sites with many pages.

navigation

Navbar

Responsive navigation bar with brand identity, navigation links, a CTA button, and a mobile menu. It supports three visual variants (light, dark, glass) and sticky positioning, automatically collapsing to a hamburger menu on mobile devices.

navigation

PageRoot

Page‑level configuration stored in <code>puckData.root.props</code>. It controls page metadata, data sources, form settings, and overall page behavior. These properties apply to the entire page and are separate from component‑level props.

general

PhotoGallery

Interactive photo gallery with lightbox viewer. Displays images in a grid or masonry layout with hover effects and click‑to‑zoom functionality. It is a universal component suitable for any site type.

general

QRCode

Generates a QR code from supplied content such as URLs, text, or vCard data. Ideal for shareable links, tickets, payments, and contact information.

advanced

Radio

Radio button group for selecting one option from mutually exclusive choices. Use when the user can see all options at once (typically 2‑5 options).

inputs

RichText

Rich text component supporting HTML formatting (bold, italic, links, lists, headings). Content is sanitized with DOMPurify for security.

typography

RoleGate

Conditional rendering component that shows or hides content based on user roles. It supports OR logic (any role matches) or AND logic (all roles must match). Use it for role‑specific UI elements such as admin buttons or owner‑only sections.

authentication

ScrollReveal

Scroll-triggered animations that reveal content as the user scrolls down the page. Supports stagger mode for card grids where children animate one‑by‑one and uses IntersectionObserver for performance.

general

ScrollTextMarquee

A velocity‑based scrolling text strip that accelerates with user scroll, repeats infinitely, and reverses direction based on scroll direction, delivering a dynamic, eye‑catching effect.

general

ShoppingCart

An e‑commerce shopping cart component that displays a product grid, supports category filtering, shows a floating cart sidebar, and provides a configurable checkout process. Product data is loaded via a query binding with field mappings for title, price, image, categories, and more. The component includes add‑to‑cart, quantity controls, and subtotal calculation.

general

SidebarNav

A vertical sidebar navigation component with collapsible functionality and optional icons. It supports main navigation items, bottom‑pinned items, dropdown children, and role‑based visibility, making it suitable for dashboards, admin panels, and applications with many navigation options.

navigation

Signature

A signature capture pad for forms that require handwritten signatures. It outputs the signature as a data URL for storage.

inputs

SkeletonLoader

A loading placeholder that displays a shimmer or pulse animation while content is being fetched, providing a professional user experience for data retrieved from APIs or databases.

general

Space

A spacing component that adds vertical or horizontal whitespace between elements, ensuring consistent spacing throughout a layout.

layout

StackingCards

Full‑screen cards that stack on top of each other as the user scrolls. Each card remains sticky and covers the previous one, producing a layered reveal effect.

general

Stats

Statistics or feature list component displaying multiple items with title and description in a horizontal row. Perfect for showcasing key metrics, features, or value propositions.

general

StickyScroll

A two‑column scroll section where one column remains fixed (sticky) while the other scrolls through steps. The sticky column crossfades between images or HTML content as the user scrolls through each step.

general

Table

A simple read‑only data table for displaying tabular information. Choose DataGrid when pagination, sorting, search, or inline editing are required.

advanced

TabNav

A tab‑style navigation bar that mimics browser tabs. It shows horizontal tabs for page navigation, optional utility items, an authentication button, and a cart icon. Brand text appears on the left, tabs in the center, and utilities on the right, making it suitable for admin dashboards, SaaS apps, and internal tools.

navigation

Tabs

A container that presents content in tabs with an animated sliding indicator. It supports 2‑5 tabs, each with slot‑based content. The indicator moves smoothly using spring physics. Three visual variants are available: underline (default), pills (rounded background), and boxed (bordered).

layout

Text

A simple paragraph component for body copy, descriptions, and supporting text. It allows alignment, size, and color customization.

typography

TextArea

Multi-line text input field for longer text content such as descriptions, comments, notes, or messages. It supports configuring visible row height and setting a maximum character length.

inputs

TextHighlight

Animated background, underline, or text‑gradient highlights applied to key phrases within a block of text. Uses pure CSS for smooth performance and works well for hero copy, headings, and benefit statements.

general

TextReveal

Direction‑based text animation triggered on scroll. The text slides in from a configurable direction (up, down, left, or right) with a blur‑to‑sharp transition. It is a high‑impact animation best used on section headings for professional landing pages.

general

Time

A time picker input that lets users select a time. It shows a desktop time selection interface and uses the native time picker on mobile devices.

inputs

Timeline

Animated vertical timeline with a scroll‑based progress indicator that shows chronological entries containing titles, descriptions, bullet points, and optional images. Ideal for company histories, product roadmaps, project milestones, changelogs, and “About Us” pages.

general

Toast

Event‑driven notification receiver that renders animated floating toasts. Place it on any page to receive notifications triggered by button scripts (e.g., <code>context.toast.success('msg')</code>) or predefined <code>showMessage</code> actions. Position, duration, and styling can be configured.

general

TransparentNavbar

A transparent navigation bar that overlays page content. It starts transparent and can transition to a solid variant on scroll, making it ideal for hero sections and landing pages where the navbar should blend with the background.

navigation

TypingAnimation

Dynamic typing animation that cycles through multiple text strings. Creates eye‑catching headlines with a typewriter effect. Universal component suitable for any site that needs an attention‑grabbing dynamic text.

general

VideoPlayer

A professional video player that supports YouTube, Vimeo, Facebook, Twitch, SoundCloud, Streamable, Wistia, DailyMotion, Mixcloud, and direct file URLs. It is fully responsive, offers customizable controls, and allows setting aspect ratios, making it suitable for any site type.

media

What is Qödiak? Platform Overview

Qödiak is a smart‑forms SaaS platform that lets anyone turn a simple English description into a fully functional, multi‑page web application. With AI‑generated apps, built‑in authentication, real‑time JavaScript scripting, and seamless external API integration, Qödiak bridges the gap between basic form builders and complex developer tools.

overview

AI App Generation — How It Works

Qödiak’s AI App Generation lets you turn a simple English description into a fully functional, multi‑page web app in seconds. By leveraging a manifest‑first architecture and intelligent page batching, the platform builds everything from navigation to data tables, authentication, and even a custom chatbot—all previewable instantly.

ai

App Themes &amp; Visual Customization in Qödiak

Qödiak’s theming engine lets you shape the entire visual identity of your app without writing a line of CSS. From core brand colors to sophisticated gradients and dark‑mode support, every visual element can be tuned to match your audience and industry.

themes

AI Chatbot — Setup & Configuration in Qödiak

Learn how to activate, train, and fine‑tune Qödiak’s built‑in AI chatbot. This guide walks you through uploading knowledge sources, customizing the widget, connecting help‑desk tools, configuring escalation rules, and monitoring performance—all without writing a single line of code.

chatbot

Built-in Authentication & Roles in Qödiak

Qödiak’s no‑code platform comes with a complete authentication system and role‑based access control right out of the box. From user registration to admin dashboards, every essential security feature is generated automatically, letting you focus on building functionality instead of wiring login flows.

authentication

JavaScript Scripting API Reference for Qödiak

Qödiak’s JavaScript Scripting API lets you add dynamic behavior to your no‑code apps without leaving the platform. Whether you need to manipulate form data, control component visibility, or run server‑side transformations, this reference explains every built‑in function, event type, and execution environment you can use.

scripting

Event Handling &amp; Button Actions in Qödiak

Learn how to make your Qödiak apps respond to user interactions with events and button actions. This guide walks you through built‑in events, predefined button actions, custom JavaScript scripts, conditional logic, and the full form‑submission flow.

events

Visual Page Builder Guide

Learn how to create beautiful, functional pages in Qödiak using the drag‑and‑drop Visual Page Builder. This guide walks you through every component, the editor workflow, reusable templates, custom CSS, and the underlying data format.

editor

Publishing Apps & Custom Domains in Qödiak

Learn how to move your Qödiak app from development to the world, configure a custom domain, embed it elsewhere, and optimize it for search engines and branding. This guide walks you through previewing, publishing, domain setup, embedding, SEO, branding, and sharing—all with practical examples.

publishing