### Quick Start Guide

Source: https://github.com/hogrid/reverso/blob/main/packages/create-reverso/README.md

Create a new project, navigate into it, and start the development server.

```bash
npx create-reverso my-project
cd my-project
npm run dev
```

--------------------------------

### Getting Started with Reverso Portfolio

Source: https://github.com/hogrid/reverso/blob/main/examples/portfolio/README.md

Commands to install dependencies, scan content, and start the development server for the Reverso Portfolio example.

```bash
pnpm install
pnpm reverso:scan
pnpm dev
```

--------------------------------

### CLI Commands: Setup

Source: https://github.com/hogrid/reverso/blob/main/README.md

Commands for initializing Reverso in a project. Use `--force` to overwrite, `--example` to include an example component, and `--yes` for non-interactive setup.

```bash
# Initialize Reverso in an existing project
reverso init

# Overwrite existing configuration
reverso init --force

# Create with example component
reverso init --example

# Non-interactive mode (accept all defaults)
reverso init --yes
```

--------------------------------

### create-reverso CLI Options and Examples

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/create-reverso.md

Demonstrates various command-line options for create-reverso, including specifying package managers, skipping installations, and using templates.

```bash
create-reverso [project-name] [options]

Options:
  --template <template>    Use a specific template
  --skip-install           Skip dependency installation
  --skip-git               Skip git initialization
  --use-npm                Use npm as package manager
  --use-yarn               Use yarn as package manager
  --use-pnpm               Use pnpm as package manager (default)
  -h, --help               Display help
  -V, --version            Show version
```

```bash
# Create with specific package manager
npx create-reverso my-site --use-npm
```

```bash
# Skip installation
npx create-reverso my-site --skip-install
```

```bash
# Use template
npx create-reverso my-site --template ecommerce
```

--------------------------------

### Install and Run Reverso CMS

Source: https://github.com/hogrid/reverso/blob/main/RELEASE_NOTES_v0.1.0.md

Use npx to create a new Reverso project, navigate into the project directory, and start the development server.

```bash
npx create-reverso my-project
cd my-project

npm run dev
```

--------------------------------

### Initialize Reverso Project with CLI

Source: https://context7.com/hogrid/reverso/llms.txt

Scaffolds Reverso into an existing Node.js project by creating `reverso.config.ts`, the `.reverso/` directory, and prompting for admin credentials. It can optionally install dependencies and start the dev server.

```bash
npx @reverso/cli@latest init
```

```bash
npx @reverso/cli@latest init --yes
```

```bash
npx @reverso/cli@latest init --force
```

```bash
npx @reverso/cli@latest init --example
```

```bash
# Expected output:
# ✔ Created reverso.config.ts
# ✔ Created .reverso/ directory
# ✔ Added .reverso/ to .gitignore
# ? Admin name › Admin
# ? Admin email › admin@localhost
# ? Admin password (min 8 characters) › ••••••••
# ✔ Admin credentials saved
# ? Install Reverso dependencies? › Yes
# ✔ Dependencies installed
# ✔ Native modules built
# ? Scan your project for data-reverso markers now? › Yes
# ? Start the development server? › Yes
```

--------------------------------

### Install Dependencies and Build

Source: https://github.com/hogrid/reverso/blob/main/CONTRIBUTING.md

Use these commands to install project dependencies, build all packages, and run the project in development mode.

```bash
pnpm install

pnpm build

pnpm dev
```

--------------------------------

### Start MCP Server

Source: https://github.com/hogrid/reverso/blob/main/packages/mcp/README.md

Start the MCP server with a specified database path.

```bash
reverso-mcp --database ./data/reverso.db
```

--------------------------------

### Start Reverso API via CLI

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/api.md

Use the CLI to start the development or production server.

```bash
# Start development server
reverso dev

# Start production server
reverso start
```

--------------------------------

### Initialize and Start Standalone MCP Server

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/mcp.md

Initialize a new ReversoMcpServer instance with a database path and start the server.

```typescript
import { ReversoMcpServer } from '@reverso/mcp';

const server = new ReversoMcpServer({
  databasePath: '.reverso/data.db',
});

await server.start();
```

--------------------------------

### Install @reverso/core

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/core.md

Install the core package using npm.

```bash
npm install @reverso/core
```

--------------------------------

### Full Reverso Configuration Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/getting-started/configuration.md

This is a comprehensive example of the reverso.config.ts file, demonstrating all available configuration options.

```typescript
import type { ReversoConfig } from '@reverso/core';

export default {
  // Source directory to scan for markers
  srcDir: './src',

  // Output directory for generated files
  outputDir: '.reverso',

  // File patterns to include/exclude
  include: ['**/*.tsx', '**/*.jsx'],
  exclude: ['**/node_modules/**', '**/dist/**', '**/*.test.*'],

  // Database configuration
  database: {
    type: 'sqlite', // or 'postgres'
    url: '.reverso/dev.db',
    // For PostgreSQL:
    // url: process.env.DATABASE_URL,
  },

  // API server configuration
  api: {
    port: 3001,
    host: 'localhost',
    cors: true,
    // Custom CORS origins
    // corsOrigins: ['http://localhost:3000'],
  },

  // Admin panel configuration
  admin: {
    title: 'My CMS',
    // Custom branding
    // logo: '/logo.png',
    // primaryColor: '#2563eb',
  },

  // Media configuration
  media: {
    uploadDir: '.reverso/uploads',
    maxFileSize: 10 * 1024 * 1024, // 10MB
    allowedTypes: ['image/*', 'video/*', 'audio/*', 'application/pdf'],
  },

  // Internationalization
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'pt', 'es'],
  },
} satisfies ReversoConfig;
```

--------------------------------

### Start Reverso Server and Access Admin

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/admin.md

Commands to start the development server and the URL to access the admin panel in a browser.

```bash
reverso dev

http://localhost:4000/admin
```

--------------------------------

### Install @reverso/api

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/api.md

Install the API package using npm.

```bash
npm install @reverso/api
```

--------------------------------

### Start Production Server with Reverso CLI

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/cli.md

Use the 'reverso start' command to launch the production server. Custom ports and hosts can be specified.

```bash
reverso start

# Options
reverso start --port 4000
reverso start --host 0.0.0.0
```

--------------------------------

### Start Reverso Development Server

Source: https://github.com/hogrid/reverso/blob/main/README.md

This command starts the Reverso development server. It scans your code for markers, starts the API server, sets up the admin account, syncs the schema, and watches for file changes.

```bash
npx reverso dev
```

--------------------------------

### Install @reverso/scanner

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/scanner.md

Install the scanner package using npm.

```bash
npm install @reverso/scanner
```

--------------------------------

### Install Optional Reverso Packages

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/overview.md

Install specific Reverso packages based on your needs. Use npm for installation.

```bash
npm install @reverso/scanner  # If running scanner manually
npm install @reverso/blocks   # If using block editor
npm install @reverso/forms    # If using form builder
npm install @reverso/mcp      # If using MCP integration
```

--------------------------------

### Install Dependencies

Source: https://github.com/hogrid/reverso/blob/main/README.md

Install project dependencies using pnpm. This command should be run after cloning the repository.

```bash
# Install dependencies
pnpm install
```

--------------------------------

### Install @reverso/db

Source: https://github.com/hogrid/reverso/blob/main/packages/db/README.md

Install the @reverso/db package using npm.

```bash
npm install @reverso/db
```

--------------------------------

### Install Dependencies

Source: https://github.com/hogrid/reverso/blob/main/examples/blog/README.md

Install project dependencies using pnpm. Ensure you have pnpm installed globally.

```bash
pnpm install
```

--------------------------------

### Start Development Server

Source: https://github.com/hogrid/reverso/blob/main/examples/blog/README.md

Launch the Next.js development server to view and test your application locally.

```bash
pnpm dev
```

--------------------------------

### Install @reverso/forms

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/forms.md

Install the forms package using npm.

```bash
npm install @reverso/forms
```

--------------------------------

### Database Sync Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/scanner.md

Example demonstrating how to use the Scanner package to scan content and synchronize the results to a database.

```APIDOC
## Database Sync

Sync scan results to database:

```typescript
import { Scanner, syncToDatabase } from '@reverso/scanner';
import { createDatabase } from '@reverso/db';

const scanner = new Scanner({ contentDir: './src' });
const db = await createDatabase({ url: '.reverso/data.db' });

const result = await scanner.scan();
await syncToDatabase(db, result);
```
```

--------------------------------

### Get Content by Path Response (JSON)

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/rest.md

Example JSON response for retrieving content by path, including value, locale, version, and timestamps.

```json
{
  "success": true,
  "data": {
    "id": "content_xyz123",
    "fieldId": "field_ghi789",
    "value": "Welcome to Our Site",
    "locale": "en",
    "version": 3,
    "publishedAt": "2025-01-15T10:30:00Z",
    "updatedAt": "2025-01-15T10:30:00Z"
  }
}
```

--------------------------------

### Start Reverso Development Server

Source: https://context7.com/hogrid/reverso/llms.txt

Launches the full development environment, including scanning for markers, starting the Fastify API server, serving the admin panel, and auto-seeding the first admin user. It also watches for file changes.

```bash
npx reverso dev
```

```bash
npx reverso dev --port 4000 --src ./components
```

```bash
npx reverso dev --database ./data/myapp.db
```

```bash
npx reverso dev --open
```

```bash
npx reverso dev --port 3001 --host localhost --database .reverso/dev.db --src ./src --open
```

```bash
# After startup, these endpoints are available:
#   Admin panel:  http://localhost:3001/admin
#   REST API:     http://localhost:3001/api/reverso
#   Health check: http://localhost:3001/health
```

--------------------------------

### Start Development Server

Source: https://github.com/hogrid/reverso/blob/main/README.md

Start the development server with all packages in watch mode. This command enables hot-reloading and live updates during development.

```bash
# Start development (all packages in watch mode)
pnpm dev
```

--------------------------------

### Install @reverso/cli Globally or via npx

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/cli.md

Install the CLI globally for direct command access or use npx to run commands without global installation.

```bash
# Global installation
npm install -g @reverso/cli

# Or use via npx
npx @reverso/cli <command>
```

--------------------------------

### Install Reverso CLI with npm

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/getting-started/installation.md

Install the Reverso CLI as a development dependency using npm.

```bash
npm install @reverso/cli --save-dev
```

--------------------------------

### Reverso CLI Configuration Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/cli.md

Example of a 'reverso.config.ts' file demonstrating required and optional configurations for content directory, database, server, and scanner settings.

```typescript
import type { ReversoConfig } from '@reverso/core';

export default {
  // Required
  contentDir: './src',

  // Database
  database: {
    type: 'sqlite',
    path: '.reverso/data.db',
  },

  // Server
  api: {
    port: 4000,
    host: 'localhost',
  },

  // Scanner
  scanner: {
    extensions: ['.tsx', '.jsx'],
    ignore: ['node_modules/**', '**/*.test.*'],
  },
} satisfies ReversoConfig;
```

--------------------------------

### Install @reverso/mcp

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/mcp.md

Install the MCP package using npm.

```bash
npm install @reverso/mcp
```

--------------------------------

### Install @reverso/admin Package

Source: https://github.com/hogrid/reverso/blob/main/packages/admin/README.md

Install the admin package using npm.

```bash
npm install @reverso/admin
```

--------------------------------

### Start Development Server with Reverso CLI

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/cli.md

Use the 'reverso dev' command to start the development server. Options allow customization of the port, host, and automatic browser opening.

```bash
reverso dev

# Options
reverso dev --port 4000      # Custom port (default: 4000)
reverso dev --host 0.0.0.0   # Custom host (default: localhost)
reverso dev --open           # Open browser automatically
```

--------------------------------

### Start Production Server on Custom Port

Source: https://github.com/hogrid/reverso/blob/main/packages/cli/README.md

Launch the production server using `reverso start`. You can specify a custom port for the server to run on.

```bash
reverso start --port 4000
```

--------------------------------

### Install Reverso CLI

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/overview.md

Install the Reverso CLI globally to use its commands for project creation and development.

```bash
npm install -g @reverso/cli
```

--------------------------------

### Install @reverso/blocks

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/blocks.md

Install the package using npm. This command adds the necessary dependencies to your project.

```bash
npm install @reverso/blocks
```

--------------------------------

### Scan Code and Start Reverso Development Server

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/getting-started/quick-start.md

Scan your project for Reverso markers and then start the development server to access the CMS.

```bash
# Scan your code for markers
npx reverso scan

# Start the CMS
npx reverso dev
```

--------------------------------

### Install Reverso CLI with pnpm

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/getting-started/installation.md

Install the Reverso CLI as a development dependency using pnpm.

```bash
pnpm add -D @reverso/cli
```

--------------------------------

### Install Reverso CLI with yarn

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/getting-started/installation.md

Install the Reverso CLI as a development dependency using yarn.

```bash
yarn add -D @reverso/cli
```

--------------------------------

### Create and Start Reverso API Server

Source: https://github.com/hogrid/reverso/blob/main/packages/api/README.md

Create a new Reverso API server instance with specified database and port, then start listening for requests.

```typescript
import { createServer } from '@reverso/api';

const server = await createServer({
  database: './data/reverso.db',
  port: 4000,
});

await server.listen();
```

--------------------------------

### Install Core Reverso Packages

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/overview.md

Manually install the core packages for Reverso development, including core types, database, and API.

```bash
npm install @reverso/core @reverso/db @reverso/api
```

--------------------------------

### Start Development Server

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/concepts/how-it-works.md

Run the `reverso dev` command to start the development server. This enables watch mode, automatically updating the schema when markers are added or modified.

```bash
reverso dev
```

--------------------------------

### Marker Path Examples

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/concepts/markers.md

Examples demonstrating how to map different HTML elements to specific paths within your content schema.

```tsx
// Page: home, Section: hero, Field: title
<h1 data-reverso="home.hero.title">Welcome</h1>

// Page: about, Section: team, Field: description
<p data-reverso="about.team.description">Our team...</p>

// Page: blog, Section: post, Field: featured_image
<img data-reverso="blog.post.featured_image" />
```

--------------------------------

### CLI Commands: Production

Source: https://github.com/hogrid/reverso/blob/main/README.md

Commands for building and starting the Reverso production server. Use `reverso build` to prepare for deployment and `reverso start` to run the production instance.

```bash
# Build for production
reverso build

# Start production server
reverso start
```

--------------------------------

### Example reverso.config.ts Configuration

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/create-reverso.md

This is an example configuration file for a Reverso CMS project, specifying project name, content directory, and database settings.

```typescript
import type { ReversoConfig } from '@reverso/core';

export default {
  name: 'My Website',
  contentDir: './src',
  database: {
    type: 'sqlite',
    path: '.reverso/data.db',
  },
} satisfies ReversoConfig;
```

--------------------------------

### Authentication Examples (cURL)

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/rest.md

Demonstrates how to authenticate API requests using either a session cookie or a Bearer token.

```bash
# Cookie-based (from login)
curl -b "session=<token>" http://localhost:4000/api/reverso/content/home.hero.title
```

```bash
# Bearer token
curl -H "Authorization: Bearer <token>" http://localhost:4000/api/reverso/content/home.hero.title
```

--------------------------------

### Complete Component Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/concepts/schema.md

This example shows a React component with various Reverso markers for different content types and sections, including a repeater.

```tsx
export function HomePage() {
  return (
    <>
      {/* Hero Section */}
      <section>
        <h1
          data-reverso="home.hero.title"
          data-reverso-type="text"
          data-reverso-label="Main Title"
        >
          Welcome to Our Site
        </h1>
        <p
          data-reverso="home.hero.subtitle"
          data-reverso-type="textarea"
        >
          We build amazing things
        </p>
        <img
          data-reverso="home.hero.background"
          data-reverso-type="image"
        />
      </section>

      {/* Features Section (Repeater) */}
      <section>
        {features.map((f, i) => (
          <div key={i}>
            <h3 data-reverso="home.features.$.title">{f.title}</h3>
            <p data-reverso="home.features.$.description">{f.desc}</p>
            <img data-reverso="home.features.$.icon" />
          </div>
        ))}
      </section>
    </>
  );
}
```

--------------------------------

### Content Structure Example

Source: https://github.com/hogrid/reverso/blob/main/examples/blog/README.md

An example of the content structure detected by the Reverso scanner. This outlines the fields and their types for different sections of the blog.

```plaintext
home/
  hero/
    title (text)
    subtitle (textarea)
    backgroundImage (image)
    ctaText (text)
  featured/
    title (text)
    description (textarea)
    posts (repeater)
      $.image (image)
      $.category (text)
      $.title (text)
      $.excerpt (textarea)
      $.author (text)
      $.date (date)
  newsletter/
    title (text)
    description (textarea)
    buttonText (text)
    disclaimer (text)

post/
  header/
    category (text)
    title (text)
    excerpt (textarea)
    date (date)
    readTime (text)
  author/
    avatar (image)
    name (text)
  featuredImage (image)
  content (wysiwyg)
  tags (multiselect)

site/
  header/
    logo (image)
    siteName (text)
    navigation (repeater)
    ctaText (text)
  footer/
    siteName (text)
    description (textarea)
    socialLinks (repeater)
    quickLinksTitle (text)
    quickLinks (repeater)
    categoriesTitle (text)
    categories (repeater)
    copyright (text)
```

--------------------------------

### Build All Reverso Packages

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/overview.md

Install dependencies and build all packages from the monorepo root using pnpm.

```bash
# From monorepo root
pnpm install
pnpm build
```

--------------------------------

### Create Reverso API Server Programmatically

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/api.md

Initialize and start the server programmatically with essential configuration.

```typescript
import { createServer } from '@reverso/api';

const server = await createServer({
  port: 4000,
  databaseUrl: '.reverso/data.db',
  uploadDir: '.reverso/uploads',
});

await server.start();
console.log('Server running at http://localhost:4000');
```

--------------------------------

### Generated Schema for Complete Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/concepts/schema.md

This JSON represents the full schema generated from the 'Complete Component Example', detailing pages, sections, and fields with their attributes.

```json
{
  "version": "1.0.0",
  "generatedAt": "2025-01-15T10:30:00Z",
  "pages": [
    {
      "id": "p_home",
      "slug": "home",
      "title": "Home",
      "sections": [
        {
          "id": "s_hero",
          "slug": "hero",
          "title": "Hero",
          "isRepeater": false,
          "fields": [
            {
              "id": "f_title",
              "slug": "title",
              "path": "home.hero.title",
              "type": "text",
              "label": "Main Title",
              "defaultValue": "Welcome to Our Site"
            },
            {
              "id": "f_subtitle",
              "slug": "subtitle",
              "path": "home.hero.subtitle",
              "type": "textarea",
              "label": "Subtitle",
              "defaultValue": "We build amazing things"
            },
            {
              "id": "f_background",
              "slug": "background",
              "path": "home.hero.background",
              "type": "image",
              "label": "Background"
            }
          ]
        },
        {
          "id": "s_features",
          "slug": "features",
          "title": "Features",
          "isRepeater": true,
          "fields": [
            {
              "id": "f_feat_title",
              "slug": "title",
              "path": "home.features.$.title",
              "type": "text",
              "label": "Title"
            },
            {
              "id": "f_feat_desc",
              "slug": "description",
              "path": "home.features.$.description",
              "type": "text",
              "label": "Description"
            },
            {
              "id": "f_feat_icon",
              "slug": "icon",
              "path": "home.features.$.icon",
              "type": "image",
              "label": "Icon"
            }
          ]
        }
      ]
    }
  ],
  "totalFields": 6
}
```

--------------------------------

### Next Steps After Project Creation

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/create-reverso.md

Instructions for adding content markers to components, running the scanner, starting the development server, and editing content via the admin panel.

```tsx
<h1 data-reverso="page.section.field">Content</h1>
```

```bash
# Run the scanner
reverso scan
```

```bash
# Start the server
reverso dev
```

--------------------------------

### Date and Time Picker

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/concepts/field-types.md

The 'datetime' field type allows selection of both date and time. This example is for an event's start time.

```tsx
<time data-reverso="event.details.starts_at" data-reverso-type="datetime">
  2025-01-15T09:00
</time>
```

--------------------------------

### Get Page Content Response (JSON)

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/rest.md

Example JSON response for retrieving all content for a page, mapping field paths to their values.

```json
{
  "success": true,
  "data": {
    "home.hero.title": "Welcome",
    "home.hero.subtitle": "Subtitle text",
    "home.hero.image": "/uploads/hero.jpg"
  }
}
```

--------------------------------

### Post-Installation Commands

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/create-reverso.md

Commands to navigate into the project directory, start the development server using npm or pnpm, and access the frontend and admin interfaces.

```bash
cd my-project

# Start development
npm run dev
# or
pnpm dev

# Visit:
# - Frontend: http://localhost:3000
# - Admin: http://localhost:4000/admin
```

--------------------------------

### Importing UI Components from @reverso/admin

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/admin.md

Example of importing Button, Input, and Card components from the admin UI library.

```tsx
import { Button } from '@reverso/admin/components/ui/button';
import { Input } from '@reverso/admin/components/ui/input';
import { Card } from '@reverso/admin/components/ui/card';
```

--------------------------------

### Rich Text Editor (WYSIWYG)

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/concepts/field-types.md

The 'wysiwyg' field type provides a What You See Is What You Get editor for formatted text content. This example is for blog post content.

```tsx
<div data-reverso="blog.post.content" data-reverso-type="wysiwyg">
  <p>This is <strong>rich</strong> content.</p>
</div>
```

--------------------------------

### Enter Pre-release Mode

Source: https://github.com/hogrid/reverso/blob/main/RELEASING.md

Initiate pre-release mode for beta versions. This command prepares the system for beta releases.

```bash
pnpm changeset pre enter beta
```

--------------------------------

### Dockerfile for Reverso Production Environment

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/cli.md

A Dockerfile to build a production image for Reverso CMS. It installs dependencies, copies the application, runs migrations, builds the admin panel, and sets the command to start the production server.

```dockerfile
FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --production

COPY . .

# Run migrations
RUN npx @reverso/cli migrate

# Build admin
RUN npx @reverso/cli build

# Start production server
CMD ["npx", "@reverso/cli", "start"]
```

--------------------------------

### Get Sitemap

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/seo.md

Retrieve the generated sitemap XML file.

```bash
GET /sitemap.xml
```

--------------------------------

### Project Structure Overview

Source: https://github.com/hogrid/reverso/blob/main/CONTRIBUTING.md

Illustrates the directory structure of the Reverso project, including published packages, applications, and examples.

```tree
reverso/
├── packages/           # Published packages
│   ├── core/          # @reverso/core
│   ├── scanner/       # @reverso/scanner
│   ├── db/            # @reverso/db
│   ├── api/           # @reverso/api
│   ├── admin/         # @reverso/admin
│   ├── blocks/        # @reverso/blocks
│   ├── forms/         # @reverso/forms
│   ├── cli/           # @reverso/cli
│   ├── mcp/           # @reverso/mcp
│   └── create-reverso/ # create-reverso
├── apps/              # Applications
│   ├── docs/          # Documentation site
│   └── playground/    # Interactive demo
└── examples/          # Example projects
```

--------------------------------

### Default Toolbar Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/blocks.md

Demonstrates how to use the default `EditorToolbar` component. It provides a set of common formatting buttons.

```tsx
import { EditorToolbar } from '@reverso/blocks';

<BlockEditor
  toolbar={<EditorToolbar />}
  // ...
/>
```

--------------------------------

### Install create-reverso Project

Source: https://github.com/hogrid/reverso/blob/main/packages/create-reverso/README.md

Use npx, pnpm, yarn, or bun to create a new Reverso CMS project with a specified name.

```bash
npx create-reverso my-project
```

```bash
pnpm create reverso my-project
```

```bash
yarn create reverso my-project
```

```bash
bun create reverso my-project
```

--------------------------------

### Initialize Reverso in Existing Project

Source: https://github.com/hogrid/reverso/blob/main/README.md

Run this command in your existing React/Next.js project to set up Reverso. It creates a configuration file, the output directory, sets up admin credentials, and installs necessary dependencies.

```bash
# In your existing React/Next.js project
npx @reverso/cli@latest init
```

--------------------------------

### Run Admin Development Server

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/admin.md

Command to start the development server for the admin package. Navigate to the package directory first.

```bash
cd packages/admin
pnpm dev
```

--------------------------------

### Initialize Reverso in an Existing Project

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/cli.md

Use 'reverso init' to set up Reverso in an existing project. This command prompts for configuration details and creates necessary files and directories.

```bash
reverso init

# Interactive prompts:
# - Database type (SQLite/PostgreSQL)
# - Content directory
# - i18n configuration
```

--------------------------------

### Protected Route Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/api.md

Example of a protected route that requires authentication.

```APIDOC
## GET /api/reverso/forms

### Description
Retrieves a list of forms. This route requires authentication.

### Method
GET

### Endpoint
/api/reverso/forms
```

--------------------------------

### Install and Run create-reverso

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/create-reverso.md

Use npm, pnpm, or yarn to create a new Reverso CMS project with a specified name.

```bash
npx create-reverso my-project
```

```bash
pnpm create reverso my-project
```

```bash
yarn create reverso my-project
```

--------------------------------

### Build All Packages

Source: https://github.com/hogrid/reverso/blob/main/RELEASING.md

Ensure all packages build successfully before proceeding with the release.

```bash
pnpm build
```

--------------------------------

### Conventional Commit Examples

Source: https://github.com/hogrid/reverso/blob/main/CONTRIBUTING.md

Examples of commit messages following the Conventional Commits specification for different types of changes.

```git
feat: add image field validation
fix: resolve scanner crash on empty files
docs: update installation guide
```

--------------------------------

### API Reference: Get Content with Locale

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/i18n.md

Reference for the GET endpoint to retrieve content for a specific path and locale.

```APIDOC
## API Reference

### Get Content with Locale

```bash
GET /api/reverso/content/:path?locale=pt
```
```

--------------------------------

### Create a New Reverso Project

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/getting-started/quick-start.md

Use this command to initialize a new Reverso CMS project.

```bash
npx create-reverso@latest
```

--------------------------------

### Start Development Server on Custom Port

Source: https://github.com/hogrid/reverso/blob/main/packages/cli/README.md

Launch the development server with hot reloading using `reverso dev`. Specify a custom port if the default is unavailable.

```bash
reverso dev --port 4000
```

--------------------------------

### Get Content with Locale API Reference

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/i18n.md

Reference for the GET API endpoint to retrieve content for a specific path and locale.

```bash
GET /api/reverso/content/:path?locale=pt
```

--------------------------------

### Get Media API Endpoint

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/media.md

Fetch a specific media item by its ID using a GET request to `/api/reverso/media/:id`.

```bash
GET /api/reverso/media/:id
```

--------------------------------

### Complete Landing Page Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/creating-pages.md

A full landing page component demonstrating how to use Reverso markers for various content types like text, images, and links.

```tsx
// components/LandingPage.tsx
import { useContent } from '@reverso/client'; // Optional: for fetching content

export function LandingPage() {
  return (
    <>
      {/* Navigation */}
      <nav>
        <img
          data-reverso="global.nav.logo"
          data-reverso-type="image"
          src="/logo.svg"
          alt="Logo"
        />
      </nav>

      {/* Hero */}
      <section className="hero">
        <h1
          data-reverso="landing.hero.headline"
          data-reverso-type="text"
          data-reverso-label="Main Headline"
        >
          Build Faster with Reverso
        </h1>
        <p
          data-reverso="landing.hero.subheadline"
          data-reverso-type="textarea"
          data-reverso-label="Subheadline"
        >
          The CMS that works the way you think
        </p>
        <a
          data-reverso="landing.hero.primary_cta"
          data-reverso-type="link"
          data-reverso-label="Primary Button"
          href="#"
          className="btn btn-primary"
        >
          Start Free Trial
        </a>
        <a
          data-reverso="landing.hero.secondary_cta"
          data-reverso-type="link"
          data-reverso-label="Secondary Button"
          href="#"
          className="btn btn-secondary"
        >
          Watch Demo
        </a>
      </section>

      {/* Features */}
      <section className="features">
        <h2 data-reverso="landing.features.title">Why Choose Us</h2>
        <div className="features-grid">
          {[1, 2, 3].map((i) => (
            <div key={i} className="feature-card">
              <img
                data-reverso={`landing.features.${i}.icon`}
                data-reverso-type="image"
                src={`/icons/feature-${i}.svg`}
              />
              <h3 data-reverso={`landing.features.${i}.title`}>
                Feature {i}
              </h3>
              <p data-reverso={`landing.features.${i}.description`}>
                Description for feature {i}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials */}
      <section className="testimonials">
        <h2 data-reverso="landing.testimonials.title">What Our Clients Say</h2>
        <blockquote
          data-reverso="landing.testimonials.featured.quote"
          data-reverso-type="textarea"
        >
          "This changed everything for our team..."
        </blockquote>
        <cite data-reverso="landing.testimonials.featured.author">
          Jane Doe, CEO
        </cite>
      </section>

      {/* CTA Section */}
      <section className="cta">
        <h2 data-reverso="landing.cta.title">Ready to Get Started?</h2>
        <p data-reverso="landing.cta.description" data-reverso-type="textarea">
          Join thousands of happy customers
        </p>
        <a
          data-reverso="landing.cta.button"
          data-reverso-type="link"
          href="#"
          className="btn btn-large"
        >
          Start Free Trial
        </a>
      </section>

      {/* Footer */}
      <footer>
        <p data-reverso="global.footer.copyright">
          © 2025 Your Company. All rights reserved.
        </p>
      </footer>
    </>
  );
}

```

--------------------------------

### Marker Detection Examples

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/scanner.md

Examples of how to use data-reverso attributes in JSX elements for basic text, explicit types, metadata, and options.

```tsx
// Basic text field
<h1 data-reverso="home.hero.title">Welcome</h1>

// With explicit type
<p
  data-reverso="home.hero.description"
  data-reverso-type="textarea"
>
  Description here
</p>

// With metadata
<img
  data-reverso="home.hero.image"
  data-reverso-type="image"
  data-reverso-label="Hero Image"
  data-reverso-help="Recommended size: 1920x1080"
  data-reverso-required="true"
/>

// With options (for select/radio)
<div
  data-reverso="home.hero.theme"
  data-reverso-type="select"
  data-reverso-options="light,dark,system"
/>
```

--------------------------------

### Troubleshooting Permission Denied

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/create-reverso.md

Solutions for 'Permission denied' errors when installing create-reverso globally on macOS/Linux, recommending npx as an alternative.

```bash
# macOS/Linux
sudo npm install -g create-reverso

# Or use npx (recommended)
npx create-reverso my-project
```

--------------------------------

### Example Next.js Page with Reverso Markers

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/create-reverso.md

An example Next.js page component demonstrating how to use Reverso markers for content localization and management.

```tsx
// src/app/page.tsx
export default function HomePage() {
  return (
    <main>
      <section className="hero">
        <h1 data-reverso="home.hero.title">
          Welcome to My Site
        </h1>
        <p
          data-reverso="home.hero.subtitle"
          data-reverso-type="textarea"
        >
          This is the subtitle
        </p>
        <img
          data-reverso="home.hero.image"
          data-reverso-type="image"
          data-reverso-label="Hero Image"
          src="/placeholder.jpg"
          alt="Hero"
        />
      </section>
    </main>
  );
}
```

--------------------------------

### Create Database Instance

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/db.md

Instantiates a database connection using the provided URL. Supports SQLite for development and PostgreSQL for production.

```APIDOC
## Create Database Instance

### Description
Instantiates a database connection using the provided URL. Supports SQLite for development and PostgreSQL for production.

### Usage
```typescript
import { createDatabase } from '@reverso/db';

// SQLite (development)
const db = await createDatabase({
  url: '.reverso/data.db',
});

// PostgreSQL (production)
const db = await createDatabase({
  url: process.env.DATABASE_URL,
});
```
```

--------------------------------

### Features List Repeater Example

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/repeaters.md

An example of using a repeater for a list of features. The '$' in the path indicates that 'home.features' is a repeater, allowing for dynamic addition and management of feature items.

```tsx
export function FeaturesSection() {
  return (
    <section className="features">
      <h2 data-reverso="home.features.title">Features</h2>
      <p data-reverso="home.features.subtitle" data-reverso-type="textarea">
        Everything you need to succeed
      </p>

      <div className="features-grid">
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <div key={i} className="feature-card">
            <div
              data-reverso="home.features.$.icon"
              data-reverso-type="image"
              data-reverso-label="Icon"
              className="feature-icon"
            />
            <h3 data-reverso="home.features.$.title" data-reverso-label="Title">
              Feature Title
            </h3>
            <p
              data-reverso="home.features.$.description"
              data-reverso-type="textarea"
              data-reverso-label="Description"
            >
              Feature description goes here
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}
```

--------------------------------

### Scan and Develop with Reverso CLI

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/creating-pages.md

Commands to scan for Reverso markers and start the development server. After adding markers, scan and run the dev server to view pages in the admin panel.

```bash
# Scan for markers
npx reverso scan

# Start dev server
npx reverso dev

```

--------------------------------

### Code Editor with Syntax Highlighting

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/concepts/field-types.md

The 'code' field type offers a code editor with syntax highlighting, suitable for displaying code snippets. This example is for documentation examples.

```tsx
<pre data-reverso="docs.example.code" data-reverso-type="code">
  const hello = "world";
</pre>
```

--------------------------------

### Scan and Watch with @reverso/scanner

Source: https://github.com/hogrid/reverso/blob/main/packages/scanner/README.md

Initialize the scanner with configuration options, scan the project, and set up a watcher for real-time updates. Ensure the root directory and include/exclude patterns are correctly configured.

```typescript
import { Scanner } from '@reverso/scanner';

const scanner = new Scanner({
  rootDir: './src',
  include: ['**/*.tsx'],
  exclude: ['**/node_modules/**'],
});

// Scan and generate schema
const schema = await scanner.scan();

// Watch for changes
scanner.watch((schema) => {
  console.log('Schema updated:', schema.pages.length, 'pages');
});
```

--------------------------------

### get_schema

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/mcp.md

Get the complete content schema.

```APIDOC
## get_schema

### Description
Get the complete content schema.

### Input
```json
{}
```

### Output
```json
{
  "pages": [...],
  "sections": [...],
  "fields": [...] 
}
```
```

--------------------------------

### get_content

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/mcp.md

Get content value by path.

```APIDOC
## get_content

### Description
Get content value by path.

### Parameters
#### Query Parameters
- **path** (string) - Required - Content path
- **locale** (string) - Optional - Locale code (default: "en")

### Input
```json
{
  "path": "home.hero.title",
  "locale": "en"
}
```

### Output
```json
{
  "path": "home.hero.title",
  "value": "Welcome to Our Site",
  "locale": "en",
  "publishedAt": "2025-01-15T10:30:00Z"
}
```
```

--------------------------------

### Configure Database Connection

Source: https://github.com/hogrid/reverso/blob/main/packages/cli/README.md

Create a `reverso.config.ts` file to configure your project. This example shows how to set up a SQLite database connection.

```typescript
import { defineConfig } from '@reverso/core';

export default defineConfig({
  database: {
    type: 'sqlite',
    path: './data/reverso.db',
  },
});
```

--------------------------------

### Scan with CLI

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/scanner.md

Use the reverso CLI to scan your project. Custom directories and verbose output are supported.

```bash
reverso scan
```

```bash
reverso scan --dir ./components
```

```bash
reverso scan --verbose
```

--------------------------------

### Get Submission

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/rest.md

Retrieves a specific form submission.

```APIDOC
## GET /forms/:id/submissions/:submissionId

### Description
Retrieves a specific form submission.

### Method
GET

### Endpoint
/forms/:id/submissions/:submissionId

### Parameters
#### Path Parameters
- `id` (string) - Required - The ID of the form
- `submissionId` (string) - Required - The ID of the submission
```

--------------------------------

### Initialize and Query Database with @reverso/db

Source: https://github.com/hogrid/reverso/blob/main/packages/db/README.md

Initialize the database connection, sync the schema, and query data using functions from the @reverso/db package. Ensure projectSchema is defined elsewhere.

```typescript
import { createDatabase, syncSchema, getPages, getContent } from '@reverso/db';

// Initialize database
const db = createDatabase('./data/reverso.db');

// Sync schema from scanner
await syncSchema(db, projectSchema);

// Query data
const pages = await getPages(db);
const content = await getContent(db, 'home.hero.title');
```

--------------------------------

### get_fields

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/mcp.md

Get fields for a specific page or section.

```APIDOC
## get_fields

### Description
Get fields for a specific page or section.

### Parameters
#### Query Parameters
- **pageSlug** (string) - Required - Page slug
- **sectionSlug** (string) - Optional - Section slug

### Input
```json
{
  "pageSlug": "home",
  "sectionSlug": "hero"
}
```

### Output
```json
{
  "fields": [
    {
      "name": "title",
      "path": "home.hero.title",
      "type": "text",
      "label": "Title",
      "required": true
    }
  ]
}
```
```

--------------------------------

### Create New Reverso Project

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/overview.md

Use the create-reverso command to scaffold a new Reverso project.

```bash
npx create-reverso my-project
```

--------------------------------

### get_page

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/mcp.md

Get detailed information about a specific page.

```APIDOC
## get_page

### Description
Get detailed information about a specific page.

### Parameters
#### Query Parameters
- **slug** (string) - Required - Page slug

### Input
```json
{
  "slug": "home"
}
```

### Output
```json
{
  "page": {
    "slug": "home",
    "name": "Home",
    "path": "/"
  },
  "sections": [
    {
      "slug": "hero",
      "name": "Hero",
      "isRepeater": false,
      "fields": [
        {
          "name": "title",
          "type": "text",
          "label": "Title"
        }
      ]
    }
  ]
}
```
```

--------------------------------

### Get Sitemap

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/seo.md

Retrieves the automatically generated sitemap.

```APIDOC
## Get Sitemap

### Description
Retrieves the automatically generated sitemap.

### Method
GET

### Endpoint
/sitemap.xml
```

--------------------------------

### Get Form

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/rest.md

Retrieves a specific form, including its fields.

```APIDOC
## GET /forms/:id

### Description
Retrieves a specific form with its fields.

### Method
GET

### Endpoint
/forms/:id

### Parameters
#### Path Parameters
- `id` (string) - Required - The ID of the form to retrieve
```

--------------------------------

### Get Project Schema

Source: https://github.com/hogrid/reverso/blob/main/packages/api/README.md

Retrieves the schema definition for the project.

```APIDOC
## GET /schema

### Description
Get project schema

### Method
GET

### Endpoint
/schema
```

--------------------------------

### Configure PostgreSQL Database

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/getting-started/configuration.md

Set up the database connection for PostgreSQL, suitable for production environments. Ensure the DATABASE_URL environment variable is set.

```typescript
database: {
  type: 'postgres',
  url: process.env.DATABASE_URL,
}
```

--------------------------------

### Build Admin Panel for Production with Reverso CLI

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/cli.md

Build the admin panel for production using the 'reverso build' command. The output directory can be specified.

```bash
reverso build

# Options
reverso build --output ./dist
```

--------------------------------

### Get Media

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/guides/media.md

Retrieves a specific media asset by its ID.

```APIDOC
## Get Media

### Description
Retrieves a specific media asset by its ID.

### Method
GET

### Endpoint
/api/reverso/media/:id
```

--------------------------------

### Get Current User

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/api/rest.md

Retrieves information about the currently authenticated user.

```APIDOC
## GET /auth/me

### Description
Retrieves information about the currently authenticated user.

### Method
GET

### Endpoint
/auth/me
```

--------------------------------

### Basic Reverso Configuration

Source: https://github.com/hogrid/reverso/blob/main/apps/docs/src/content/docs/packages/core.md

Create a reverso.config.ts file in your project root to define project settings like name, content directory, and database.

```typescript
import type { ReversoConfig } from '@reverso/core';

export default {
  // Project name
  name: 'My Website',

  // Content directory to scan
  contentDir: './src',

  // Database configuration
  database: {
    type: 'sqlite',
    path: '.reverso/data.db',
  },

  // i18n configuration (optional)
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'pt', 'es'],
  },

  // Media configuration (optional)
  media: {
    uploadDir: '.reverso/uploads',
    maxFileSize: 10 * 1024 * 1024, // 10MB
  },
} satisfies ReversoConfig;
```