verified
Type Safety
Catch styling errors at compile time, not runtime. Say goodbye to typo-prone CSS class strings.
auto_fix_high
Fluent API
Chain modifiers intuitively for responsive and state-based designs with methods like .at(Breakpoint.md).
devices
Responsive
Built-in breakpoint support makes it easy to create adaptive layouts for any screen size.
palette
DaisyUI Faithful
Provides a near 1:1 mapping of DaisyUI components, giving you full creative control.
Write UI with confidence.
From brittle, error-prone strings to a fully type-safe and expressive API.
Jaspr with manual DaisyUI classes.
Prone to typos, hard to read, and no autocomplete.// Jaspr with manual DaisyUI classes.
div([
figure([img(src: '/images/sneaker.png', alt: 'Shoes')]),
div(classes: 'card-body', [
h2(classes: 'card-title', [
text('Shoes!'),
div(classes: 'badge badge-secondary', [text('NEW')]),
]),
p([text('If a dog chews shoes whose shoes does he choose?')]),
div(classes: 'card-actions justify-end', [
button(
[text('Buy Now')],
classes: 'btn btn-primary',
),
]),
]),
],
classes: 'card w-full sm:w-96 bg-base-100 shadow-xl transition-shadow hover:shadow-2xl',
)
The Deepyr Way. Fully type-safe, composable, and fluent.
Full IDE support, compile-time checks, and clean code.// The Deepyr Way: Fully type-safe, composable, and fluent.
Card([
Figure([img(src: '/images/sneaker.png', alt: 'Shoes')]),
CardBody([
CardTitle([
text('Shoes!'),
Badge([text('NEW')], style: [Badge.secondary]),
]),
p([text('If a dog chews shoes whose shoes does he choose?')]),
CardActions(
[Button([text('Buy Now')], style: [Button.primary])],
style: [Alignment.justifyEnd],
),
]),
],
style: [Size.wFull, Size.w96.at(Breakpoint.sm), BgUtil.base100, Effects.shadowXl, Effects.shadow2xl.on([Is.hover])],
)
Getting Started
A quick guide to get the example project up and running.
info
Prerequisites: Make sure you have Node.js and the Jaspr CLI installed.
1 Install Dependencies
Install the Node.js and Dart dependencies.
npm install
dart pub get
2 Run Development Servers
You'll need two separate terminals.
Terminal 1: Tailwind CSS
npx tailwindcss -i ./web/styles.tw.css -o ./web/styles.css --watch
Terminal 2: Jaspr Server
jaspr build
jaspr serve -v