Start from 12 presets, shape colors with OKLCH curves, pick fonts and icon sets, set component defaults, then export a theme for Quasar CLI or Nuxt.

Pick direction, alignment, gutter and column spans per breakpoint, preview the layout and copy the row and col markup.

Search every q-pa, q-ma, text and visibility class, see each one applied in a live preview and click to copy it.

Search Material Icons, Material Symbols, MDI, Font Awesome and every other Quasar icon set, then copy the exact name and the config that loads it.

Toggle color, design, shape, size, icons and loading on a live Quasar button, then copy the q-btn template it writes.

Test the eight Quasar brand colors against WCAG 2.2 in light and dark mode, then copy the nearest shades that pass.

Resize the window and watch $q.screen and the gt-/lt- classes change live, then copy setSizes, Sass breakpoints and visibility classes.

Paste a JSON array of rows and copy a typed QTable columns array, with align, sorting and date or number formats, plus a ready q-table.

Pick required, length, email, regex, number range or async checks for a QInput, test them live and copy the rules array.

Search any v- component or prop and see its Quasar equivalent, the props that change name, and Vuetify and Quasar code side by side.

Preview shadow-1 to shadow-24, shadow-up, inset-shadow and no-shadow on a card in light and dark mode, then build a custom shadow on Quasar's scale.

Type a date.formatDate mask and see the output for any date and locale, with every token, warnings for common mistakes and formatDate, extractDate and QDate code.