tweaktags

TweakTags example, Next.js app

This small app shows TweakTags working end to end with Next.js and Postgres.

A backend handler mounted at app/api/tweaktags/route.ts.
The provider and edit bar wired up in app/layout.tsx.
Two editable spots using the <Editable> component and one plain HTML element that only has a data-tweaktags-plain-note attribute, in app/page.tsx.

These steps assume you run them from a WSL terminal where Node and pnpm work natively.

Start a local Postgres, for example with Docker:

docker run --name tweaktags-pg -e POSTGRES_USER=tweaktags -e POSTGRES_PASSWORD=tweaktags \
  -e POSTGRES_DB=tweaktags -p 5432:5432 -d postgres:16

From the repo root, install and build the packages:
```
pnpm install
pnpm build
```
Set the environment variables for this app. Copy .env.example to .env and adjust if needed:
```
cp examples/next-app/.env.example examples/next-app/.env
```

Create the tables and a superuser, using the config in this folder:

cd examples/next-app
pnpm tweaktags migrate
pnpm tweaktags create-superuser --email you@example.com --password supersecret

Start the app:
```
pnpm dev
```
Open the app, sign in with the edit bar in the corner, click “Edit page”, change any of the three editable spots, then click away to save. Reload the page to confirm the change was stored in the database.

You can confirm the saved rows directly:

docker exec -it tweaktags-pg psql -U tweaktags -d tweaktags -c 'SELECT tag, body FROM "__TweakTags__Content";'

This site is open source. Improve this page.