rocket_launch Getting Started

QReate is a fully client-side QR code generator with advanced visual customization. No data ever leaves your browser, everything is processed locally.

The interface is divided into 3 areas:

• Left sidebar: Folder and project management
• Center area: Real-time QR code preview
• Right sidebar: Configuration panel with collapsible sections (only one tab open at a time)

To create a QR code, select a content type in the Content section (open by default), fill in the fields, and the preview updates in real time. Then customize the appearance through the other sections: dot styles, colors, logo, frame, etc.

When you are satisfied, use the Export button in the header to download your QR code in SVG, PNG, WebP, or PDF format. You can also save your creations with the Save button for later editing.

dataset Content Types

QReate supports 12 content types, each with a dedicated form that generates the correct QR code encoding. Select the type that matches your use case, fill in the required fields, and the QR code will be generated automatically.

palette Design Options

Design controls are organized in the right sidebar as collapsible sections (only one tab open at a time).

QR Shape

Choose between a square or circle shape for the QR code itself. This toggle is at the top of the Dots Styles section.

Dot Styles

Choose from 22 module styles that define the shape of data elements: square, rounded, extra-rounded, dot, random-dot, classy, classy-rounded, diamond, heart, star, wave, weave, pentagon, hexagon, small-square, tiny-square, vertical-line, horizontal-line, zebra-horizontal, zebra-vertical, blocks-horizontal, and blocks-vertical. Each style is previewed with an SVG image in a 4-column grid.

Corner Eyes

The three finder patterns can be customized independently. The outer square supports 7 styles (square, extra-rounded, dot, classy, inpoint, outpoint, center-circle) and the inner dot supports 11 styles (square, dot, heart, extra-rounded, classy, inpoint, outpoint, star, pentagon, hexagon, diamond).

Colors & Gradients

Foreground: choose between a solid color or a gradient (linear or radial). Gradient mode offers 6 presets (Sunset, Ocean, Purple, Forest, Night, Pink), a live preview bar, two color pickers, a linear/radial toggle, and an angle slider (0-360°).

Background: the background shape is independent from the QR shape, choose between square and circle. Three modes are available: solid color (with transparent option), gradient (6 presets), or image (drag-and-drop upload). A contrast warning appears if the luminance ratio is too low.

Padding

Control the inner margin (in QR modules) around the QR code to adjust spacing between the content and the edges.

add_photo_alternate Logo & Icon

Add a logo or icon to the center of your QR code. QReate offers four modes selectable via joined buttons:

• None: No logo
• Image: Upload a custom image (SVG, PNG, or JPG, up to 500 KB)
• Simple Icons: Enter an icon slug to automatically load the logo from simpleicons.org (e.g., bluetooth, discord, github). A grid of popular presets (Facebook, Instagram, YouTube, WhatsApp, etc.) is also available
• Materials: Enter a Material Symbols icon name (e.g., home, search, star) or use the built-in picker with over 200 icons organized by category. Customize the icon color

Regardless of the mode, shared controls are available: size (15-50%), margin, padding, background with color/opacity, and border radius.

When a logo or icon is active, the error correction level is automatically raised to at least Q (25%) to ensure scannability despite the central obstruction.

frame_source Frames

Frames add a decorative border around your QR code, often with a call-to-action text label. Available frames depend on the background shape: rectangular frames appear with square backgrounds, circular frames with round backgrounds.

Rectangular Frames

10 styles for square backgrounds:

• Squared: Clean border (supports border radius)
• Badge: Border + text banner (top/bottom position)
• Box: Rectangular enclosure with text area
• Speech: Speech bubble with configurable arrow
• Corners: L-shaped brackets at all four corners
• Badged Corner: L-shaped brackets + text banner
• Chevrons: Text banner with chevron/zigzag pattern
• Pill: Pill-shaped text banner
• Big Arrow: Large arrow-shaped banner
• Ribbon: Ribbon with notched cutout

Circular Frames

6 styles for round backgrounds:

• Ring: Simple ring around the QR
• Ring Badge: Ring + text banner (top/bottom)
• Ring Speech: Ring + speech bubble
• Ring Pill: Ring + pill-shaped banner
• Arc Text: Ring with curved text following the circle (up to 180 characters)
• Orbit: Double ring (solid + dashed) with curved orbital text (up to 180 characters)

Controls

Common controls: label, text position, frame and text color, border width, border radius, and font size.

Arc Text and Orbit frames have specific controls: text direction (Forward / Backward, orients letters facing outward or inward), start angle (0-360°, positions text around the circle), and text gap (spacing between the circle and the text).

Some rectangular styles have additional parameters: arrow size (Speech), bracket spacing (Corners, Badged Corner), chevron depth and width (Chevrons), pill spacing (Pill), arrow depth (Big Arrow), and notch depth (Ribbon).

folder_open History & Folders

The left sidebar manages your saved projects, stored in your browser's localStorage.

Folders

• Inbox: Always at the top, holds unorganized projects
• Custom folders: Create, rename (double-click), or delete folders. Deleting a folder moves its projects to Inbox
• Favorites: Filtered view of starred projects

Projects

Each project displays a thumbnail, its name, and content type. The context menu (three dots) allows you to:

• Star / unstar the project
• Duplicate the project
• Move to another folder
• Delete the project

Click on a project to load it into the editor. The Save button in the header updates the existing project or creates a new one.

download Export

QReate supports four export formats, accessible from the Export button in the header:

• SVG: Scalable vector file, ideal for print at any size without quality loss
• PNG: Raster image at sizes 256, 512, 1024, 2048 px or custom up to 4096 px
• WebP: Compressed image, same size options as PNG
• PDF: Document with page options (A4, A5, 10x10 cm, custom), optional title and subtitle, adjustable margin

All formats can be downloaded as files or copied to the clipboard. Frames, logos, and all customizations are faithfully reproduced in the export.

code Technologies

• Nuxt 3: Vue.js framework
• @liquid-js/qr-code-styling: QR rendering engine with advanced styles
• Tailwind CSS + DaisyUI: User interface
• Pinia: Reactive state management
• jsPDF: PDF document generation
• Simple Icons CDN: Brand logos
• Material Symbols: Google icons