# @fragno-dev/core
Latest version **0.2.0** (published 2026-02-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install @fragno-dev/core
pnpm add @fragno-dev/core
yarn add @fragno-dev/core
bun add @fragno-dev/core
```
## Health
**Score 70/100 (B)** — status: stable.
Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.
Warnings: low downloads; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.2.0 |
| Published | 2026-02-08 |
| First published | 2025-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 62 |
| Maintainers | wilco-rejot, schuttejan |
## Links
- npm: https://www.npmjs.com/package/@fragno-dev/core
- Repository: https://github.com/rejot-dev/fragno
- Homepage: https://fragno.dev
- Issues: https://github.com/rejot-dev/fragno/issues
- npm.io page: https://npm.io/package/@fragno-dev/core
## Dependencies (6)
- [rou3](https://npm.io/package/rou3.md) ^0.7.12
- [nanostores](https://npm.io/package/nanostores.md) ^1.1.0
- [@nanostores/query](https://npm.io/package/@nanostores/query.md) ^0.3.4
- [@nanostores/solid](https://npm.io/package/@nanostores/solid.md) ^1.1.1
- [@paralleldrive/cuid2](https://npm.io/package/@paralleldrive/cuid2.md) ^2.3.1
- [@standard-schema/spec](https://npm.io/package/@standard-schema/spec.md) ^1.1.0
## Recent versions
- 0.2.0 (latest) — 2026-02-08
- 0.0.0-canary-33648424447-1-20260902152634 (canary) — 2026-09-02
- 0.0.0-canary-33638756760-1-20260902135654 — 2026-09-02
- 0.0.0-canary-33623072452-1-20260902110949 — 2026-09-02
- 0.0.0-canary-33536085385-1-20260901171022 — 2026-09-01
- 0.0.0-canary-33530653514-1-20260901161603 — 2026-09-01
- 0.0.0-canary-33529615489-1-20260901160542 — 2026-09-01
- 0.0.0-canary-33527525160-1-20260901154504 — 2026-09-01
- 0.0.0-canary-33514693536-1-20260901134147 — 2026-09-01
- 0.0.0-canary-33514100232-1-20260901133436 — 2026-09-01
- 0.0.0-canary-33503021813-1-20260901113345 — 2026-09-01
- 0.0.0-canary-33492717650-1-20260901093309 — 2026-09-01
- 0.0.0-canary-33392684151-1-20260831123833 — 2026-08-31
- 0.0.0-canary-33261718897-1-20260829160023 — 2026-08-29
- 0.0.0-canary-33253572101-1-20260829125313 — 2026-08-29
- … 376 more at https://npm.io/package/@fragno-dev/core/versions
## README
These lines also set up webhook integration and make data available to the frontend
### What's Fragno?
Fragno is a toolkit for building libraries that bundle frontend hooks, backend routes, and database
operations into a single package. This allows library authors to ship complete features across the
full stack.
**Fragno supports all major frameworks: Next.js, Nuxt, SvelteKit, SolidStart, and more.** Wherever
your users are, Fragno will work. This is also true for the **data layer**: Fragno integrates with
**Kysely**, **Drizzle**, **Prisma** and is database-system agnostic.
Fragno has all features you'd expect from a **modern framework**: type-safe routes, streaming data,
and middleware support. Frontend hooks follow "Stale-While-Revalidate" semantics and allow arbitrary
logic.
When using the **optional** data layer, all expected features are supported like schema generation
and querying. We also focus on performance and correctness with **indexes and transactions**.
#### First-party full-stack libraries
Fragno has a number of first-party Fragments that help builders get started quick in various ways:
- [Stripe](https://github.com/fragno-dev/stripe) - Stripe integration with subscriptions and
webhooks.
- [Forms](https://github.com/fragno-dev/forms) - Forms with validation and submission.
- [Workflows](https://github.com/fragno-dev/workflows) - [ALPHA] Workflows with steps, timers,
events, and retries.
- [Upload](https://github.com/fragno-dev/upload) - File upload handling with storage adapters for
S3, R2, and filesystem.
To get started with any of these, install the Agent Skill:
```bash
npx skills add https://github.com/rejot-dev/fragno --skill fragno
```
Then ask: "Use fragno to integrate the Stripe fragment into my application."
#### When to build with Fragno?
- You are a **Client SDK author** and want to do more than simply wrapping API calls. You can use
Fragno so your users no longer have to be concerned with webhook handlers and your data model. You
understand **idempotency** and **at-least-once delivery**, but your users don't have to.
- You want to build **full-stack components** that can be reused across applications, regardless of
their stack. You see how **Better-Auth is outmaneuvering SaaS auth providers** and want to do the
same for your vertical.
Either way, you want to use Fragno when you care about a great developer experience for your users,
you care about correctness and performance, and want to have everything tested from the ground up.
#### What it looks like
Start by defining what configuration you need from your users:
```ts
export interface ChatConfig {
openaiApiKey: string;
model?: string;
}
export const definition = defineFragment("chat")
.withDependencies(({ config }) => ({ openaiClient: new OpenAI({ apiKey: config.openaiApiKey }) }))
.build();
```
Then, simply define a route:
```ts
export const routes = defineRoutes(definition).create(({ defineRoute, deps, config }) => {
const { openaiClient } = deps;
return [
defineRoute({
method: "POST",
path: "/chat/:id",
inputSchema: z.object({ message: z.string() }),
outputSchema: z.any(),
handler: async ({ input }, { json }) => {
const { message } = await input.valid();
return json({
response: await openaiClient.responses.create({
model: config.model ?? "gpt-5-nano",
// ...
}),
});
},
}),
];
});
```
And your client-side hooks:
```ts
const builder = createClientBuilder(definition, options, routes);
const hooks = {
useChat: builder.createMutator("POST", "/chat/:id"),
};
```
Your users can then immediately use the hooks in their application:
```ts
const { mutate, loading, error } = useChat();
const { response } = await mutate({
body: { message: prompt },
});
```
#### Example use cases
- **Full-stack components** – opinionated packages that own backend, frontend, and a data layer.
E.g.:
- Feature flags
- Form submission / builder
- Authentication (Better Auth–style)
- File uploads
- etc
- **Client SDKs** – packages to facilitate interaction with a SaaS application, such as payments.
Flows with a lot of webhooks can benefit greatly.
### Documentation
Full documentation can be found at [fragno.dev](https://fragno.dev/docs).
The docs are split in two:
- [For Library Authors](https://fragno.dev/docs/fragno/for-library-authors/getting-started) -
Everything you need to build Fragno libraries.
- [User Quick Start](https://fragno.dev/docs/fragno/user-quick-start) - This gives you a good idea
on how users would integrate your library and how they would customize the experience.
#### Quick Start
Basic template to get you started building a full-stack Fragno library:
```bash
# Create a new Fragno library from a template
pnpm create fragno@latest
```
Also make sure to install the Agent Skill:
```bash
npx skills add https://github.com/rejot-dev/fragno --skill fragno-author
```
Then ask: "Use fragno-author to scaffold a fragment for feature flags."
### Features
- **End-to-end type safety**: Standard Schema-compatible route typing and fully type-safe client
hooks.
- **Built-in frontend state management**: reactive stores with caching and invalidation (TanStack
Query-style) via [Nano Stores](https://github.com/nanostores/nanostores).
- **Optional data layer**: type-safe database layer with schema generation and adapters for common
ORMs.
- **Middleware support**: users can plug in authentication, rate limiting, and other cross-cutting
concerns.
- **Streaming support**: NDJSON (newline-delimited JSON) streaming for real-time use cases.
- **Automatic code splitting**: library-level splitting via `@fragno-dev/unplugin-fragno`, no extra
build complexity for end users.
#### Data Layer
Define schemas, query with type safety, and write directly to the user's database.
```ts
schema((s) => {
return s.addTable("conversation", (t) => {
return t
.addColumn("id", idColumn())
.addColumn("messages", column("json"))
.addColumn("createdAt", column("timestamp"))
.createIndex("idx_conversation_createdAt", ["createdAt"]);
});
});
```
**Fragno's schema builder** is intentionally restricted in types to be able to map onto multiple
ORMs and databases. Its basic feature set still contains everything you need to build a rich and
performant schema such as indexes and relationships.
The **query builder** follows the same pattern. Retrieval operations such as filtering and ordering
take indexes as arguments, so it's impossible to write queries that can't be executed efficiently.
Simple joins are supported as well as cursor-based pagination.
**Transactions** are supported via the _Unit of Work_ pattern. This is a two-phase pattern for
atomic operations using optimistic concurrency control (OCC). The first phase **retrieves** the
data, the second phase is responsible for **mutating** the data. When mutating, the OCC pattern
ensures that data isn't modified by another client. This means transactions are non-interactive,
meaning the user's database cannot be blocked for a long time.
We make sure it's easy to **test** everything. Fragno libraries can be easily instantiated in test
environments, the data layer will be backed by a real SQLite or PGLite database. This means you can
easily test full flows, from calling a route to persisting data to the database.
#### Framework and database support
Fragno focuses on a small, framework-agnostic surface (standard `Request`/`Response`) and provides
adapters for many environments.
| Client-side frameworks | Support | — | Server-side frameworks | Support |
| ---------------------- | ------- | --- | ----------------------- | ------- |
| React | ✅ | | Node.js / Express | ✅ |
| Vue | ✅ | | React Router v7 / Remix | ✅ |
| Vanilla JavaScript | ✅ | | Astro | ✅ |
| Svelte | ✅ | | Next.js | ✅ |
| SolidJS | ✅ | | Nuxt | ✅ |
| | | | SvelteKit | ✅ |
| | | | SolidStart | ✅ |
| | | | TanStack Start | ✅ |
See the [Framework Support](https://fragno.dev/docs/fragno/reference/frameworks) page for the full
and up-to-date list, including database adapter support.
Supported ORMs are Kysely, Drizzle, and Prisma, with Postgres and SQLite. This includes PGLite and
Cloudflare Durable Objects.
### Example Code
This repo ships complete examples and sample libraries:
- `example-fragments/stripe` – A featureful Stripe integration library that manages subscriptions
and customers. It uses the data layer to consume webhooks from Stripe and write them to the user's
database. See the [Stripe Quick Start](https://fragno.dev/docs/stripe/quickstart) for more
details. This full-stack library is also discussed in
["Solving Split Brain Integrations"](https://fragno.dev/blog/split-brain-stripe).
- `example-fragments/example-fragment` – minimal Fragno library example.
- `example-apps/*` – full application examples (React Router, Next.js, Nuxt, Astro, SvelteKit,
SolidStart, Vue SPA, etc.).
- `example-apps/stripe-webshop` – Uses Drizzle and Better Auth with PGLite to integrate the Stripe
Fragment.
### Contributing
Fragno is an open source project. We welcome contributions! Fragno is licensed under the MIT
License. See the [LICENSE](LICENSE.md) file for details.
See the [CONTRIBUTING](CONTRIBUTING.md) file for details.
Make sure to star the repo! ⭐️
---
_Source: https://npm.io/package/@fragno-dev/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._