open-index/open-npm huggingface dataset:
npm package: @logshot/client
Description: Forward console output to a local LogShot server (POST /ingest). No server or native dependencies.
Latest version: 0.1.0

# @logshot/client

Patches `console.log`, `console.info`, `console.warn`, and `console.error` so lines also go to a local LogShot server (`POST /ingest`). No dependencies beyond `fetch`.

Run LogShot with a `browser` source (see the **logshot** package). Default URL: `http://127.0.0.1:7331`.

```bash
npm install @logshot/client
```

```javascript
import { initLogshot } from '@logshot/client';

const stop = initLogshot();
```

Optional port: `initLogshot(7331)`. Call `stop()` on teardown (for example return it from a React `useEffect`). Only use in development—gate the call yourself (`import.meta.env.DEV`, etc.).

## License

MIT
npm package: @logshq.io/node
Description: Official LogsHQ.io logger for Node.js
Author: LogsHQ LTD
Latest version: 1.1.11

<p align="left">
  <img src="https://logshq.io/logo-480.jpg" width="200">
</p>

# Official LogsHQ.io logger for Node.js

The official LogsHQ.io notifier for capturing Nodejs errors in Node.js and reporting them to [LogsHQ](https://www.logshq.io/).

## Installation

Using npm:

```sh
npm install @logshq.io/node --save
```

Using yarn:

```sh
yarn add @logshq.io/node
```

## Usage

Create a Stream and get your Stream API KEY, and use it like this:

```js
// myLogger.js
const LogshqLogger = require('@logshq.io/node');

const logger = new LogshqLogger({
  project_id: 'SOME-PROJECT-ID',
  api_key: 'SOME-STREAM-KEY',
  environment: 'production', // optional
  hostname: 'auth-service', // optional
});

module.exports = logger
```

## Examples

```js
// auth.js
const { correlationId } = require('SomeModule')
const logger = require('./myLogger')

function signUp (user) {
  try {
    await authService.create(user);
    logger.debug('Signup success sending email now', {
      step: 'Step 1',
      next: 'Preparing Email',
      method: 'signUp',
      module: 'auth.js',
      correlationId
    });
    // Send Welcome Email
    logger.debug('Email sent', {
      step: 'Step 2',
      next: 'Returning OK',
      method: 'signUp',
      module: 'auth.js',
      correlationId
    });
    // Return something
    logger.info('Signup success', {
      step: 'Step 3',
      method: 'signUp',
      module: 'auth.js',
      correlationId
    });
  } catch (error) {
    logger.error('Signup failed', error, {
      method: 'signUp',
      module: 'auth.js',
      correlationId
    });
  }
}
```

# More docs
[here](https://docs.logshq.io/reference/integrations/node.js)
npm package: @logshq.io/react
Description: Official LogsHQ.io logger for React
Author: LogsHQ LTD
Latest version: 1.0.14

<p align="left">
  <a href="https://www.logshq.io/" target="">
    <img src="https://logshq.io/logo-480.jpg" width="200">
  </a>
</p>

# Official LogsHQ.io logger for React

The official LogsHQ.io notifier for capturing errors in React and reporting them to [LogsHQ](https://www.logshq.io/).

## Installation

Using npm:

```sh
npm install @logshq.io/react
```

Using yarn:

```sh
yarn add @logshq.io/react
```

## Usage

Create a Stream in the Dashboard, get your Stream and Project API KEYS, and use it like this:

```js
// myLogger.js
const LogshqLogger = require('@logshq.io/react');

const logger = new LogshqLogger({
  project_id: 'SOME-PROJECT-ID',
  api_key: 'SOME-STREAM-KEY',
  environment: 'production', // optional
  hostname: 'auth-service', // optional
});

module.exports = logger
```

PS: This can work inside or outside of your Components, like Saga for example!.

## Inside React Components

```js
import React, { useState, useEffect } from 'react';
// Import the logger
import LogshqLogger from'@logshq.io/react';
import axios from 'axios';

// This could in a seperate module so it can be called inside Redux Saga or inside // any other component
const logger = new LogshqLogger({
  project_id: 'SOME-PROJECT-ID',
  api_key: 'SOME-STREAM-KEY',
  environment: process.env.NODE_ENV, // optional
  hostname: 'auth-service', // optional
});

const MyComponent = () =>{ 
  const [data, setData] = useState([]);
  
  const fetchData = async () => {
    try {
      // Calling your API endpoind
      const result = await axios(
        'https://some-domain.com/api/v1/search?query=myQuery',
      );
      // Success
      setData(result.data)
    } catch (error) {
      // Send the error and some additional details to help debugging properly
      logger.error(error, {
        component: 'MyComponent',
        someData: {
          someNestedData: 'Some Value'
        }
      })
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {
          data.map(item => (
            <li key={item.id}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))
        }
      </ul>
    </div>
  );
}

export default MyComponent;
```

# Catch JavaScript errors anywhere in your child components

See [Error Boundaries](https://reactjs.org/docs/error-boundaries.html)

# More docs
[here](https://docs.logshq.io/reference/integrations/react.js)
npm package: @logsnag/astro
Description: LogSnag client for Astro applications
Author: Shayan
Latest version: 1.0.0-beta.1

<div align="center">
	<img src="https://logsnag.com/og-image.png" alt="LogSnag"/>
	<br>
    <h1>@logsnag/astro</h1>
	<p>Clear, Simple, Effective Product Analytics for SaaS.</p>
	<a href="https://www.npmjs.com/package/@logsnag/astro"><img src="https://img.shields.io/npm/v/@logsnag/astro" alt="NPM Version"></a>
	<a href="https://discord.gg/dY3pRxgWua"><img src="https://img.shields.io/discord/922560704454750245?color=%237289DA&label=Discord" alt="Discord"></a>
	<a href="https://docs.logsnag.com"><img src="https://img.shields.io/badge/Docs-LogSnag" alt="Documentation"></a>
	<br>
	<br>
</div>

## Installation

### Using npm

```bash
npm install @logsnag/astro
```

### Using yarn

```bash
yarn add @logsnag/astro
```

### Using pnpm

```bash
pnpm add @logsnag/astro
```


## Usage

First, install the LogSnag plugin in your astro application:

> Set your token's scope to `public` in the LogSnag dashboard.

```html
---
import LogSnag from "@logsnag/astro/LogSnag.astro";
---

<LogSnag token="<TOKEN>" project="<PROJECT_NAME>" />
```

Then, import the functions you need from the package:

```html
<script>
import { setUserId, track, identify } from "@logsnag/astro";
// Set the user id for the current user
setUserId('user-123');

// Track an event
track({
  channel: "payments",
  event: "New Subscription",
  user_id: "user-123",
  icon: "💰",
  notify: true,
  tags: {
    plan: "premium",
    cycle: "monthly",
    trial: false
  }
});

// Identify a user
identify({
  user_id: "user-123",
  properties: {
    name: "John Doe",
    email: "john@doe.com",
    plan: "premium",
  }
});
</script>
```

You can also track events directly from HTML elements using data attributes:

```html
<button
    data-event="Upgraded Plan" 
    data-channel="billing"
    data-icon=":moneybag:"
    data-tag-plan="Pro"
    data-tag-period="Monthly"
    data-tag-price="9.99"
>
    Upgrade to Pro
</button>
```

In this example, when the button is clicked, an event named "Upgraded Plan" will be tracked with the specified tags.

## Hooks

- `track(options: TrackOptions)`: Track custom events.
- `identify(options: IdentifyOptions)`: Identify user traits.
- `setUserId(userId: string | null)`: Set the user id for the current user. If the user is not logged in, pass null.
- `clearUserId()`: Clear the user id for the current user.
- `setDebug(flag: boolean = true)`: Set debug mode for logging.

## API Documentation

For more information about the LogSnag API, see: [docs.logsnag.com](https://docs.logsnag.com)

## Support

If you encounter any problems or issues, please contact us at [shayan@logsnag.com](mailto:shayan@logsnag.com)
npm package: @logsnag/node
Description: LogSnag client for Node.js applications
Author: Shayan
Latest version: 1.0.1

<div align="center">
	<img src="https://logsnag.com/og-image.png" alt="LogSnag"/>
	<br>
    <h1>@logsnag/node</h1>
	<p>Clear, Simple, Effective Product Analytics for SaaS.</p>
	<a href="https://www.npmjs.com/package/@logsnag/node"><img src="https://img.shields.io/npm/v/@logsnag/node" alt="NPM Version"></a>
	<a href="https://discord.gg/dY3pRxgWua"><img src="https://img.shields.io/discord/922560704454750245?color=%237289DA&label=Discord" alt="Discord"></a>
	<a href="https://docs.logsnag.com"><img src="https://img.shields.io/badge/Docs-LogSnag" alt="Documentation"></a>
	<br>
	<br>
</div>

## Installation

### Using npm

```bash
npm install @logsnag/node
```

### Using yarn

```bash
yarn add @logsnag/node
```

### Using pnpm

```bash
pnpm add @logsnag/node
```


## Usage

```javascript
import { LogSnag } from '@logsnag/node';

const logsnag = new LogSnag({
  token: '<TOKEN>',
  project: '<PROJECT_NAME>'
});

// Track an event
await logsnag.track({
  channel: "payments",
  event: "New Subscription",
  user_id: "user-123",
  icon: "💰",
  notify: true,
  tags: {
    plan: "premium",
    cycle: "monthly",
    trial: false
  }
});

// Identify user traits (e.g. name, email, plan, etc.)
await logsnag.identify({
  user_id: "user-123",
  properties: {
    name: "John Doe",
    email: "john@doe.com",
    plan: "premium",
  }
});

// Track an insight
await logsnag.insight.track({
  title: "User Count",
  value: "100",
  icon: "👨",
});

// Increment an insight value
await logsnag.insight.increment({
  title: "User Count",
  value: 1,
  icon: "👨",
});

```

## Disabling Tracking

You can disable tracking for development purposes by using the `disableTracking` method:

```javascript
logsnag.disableTracking();
```

And enable it back with:

```javascript
logsnag.enableTracking();
```

You can check if tracking is disabled with:

```javascript
logsnag.isTrackingDisabled();
```

## Methods

- `track(options: TrackOptions): Promise<boolean>`: Track custom events.
- `identify(options: IdentifyOptions): Promise<boolean>`: Identify user traits.
- `group(options: GroupOptions): Promise<boolean>`: Group users.
- `insightTrack(options: InsightTrackOptions): Promise<boolean>`: Track insights.
- `insightIncrement(options: InsightIncrementOptions): Promise<boolean>`: Increment insight values.

## API Documentation

For more information about the LogSnag API, see: [docs.logsnag.com](https://docs.logsnag.com)

## Support

If you encounter any problems or issues, please contact us at [shayan@logsnag.com](mailto:shayan@logsnag.com)
npm package: @logsnag/vue
Description: LogSnag client for Vue 3 applications
Author: Shayan
Latest version: 1.0.0

<div align="center">
	<img src="https://logsnag.com/og-image.png" alt="LogSnag"/>
	<br>
    <h1>@logsnag/vue</h1>
	<p>Clear, Simple, Effective Product Analytics for SaaS.</p>
	<a href="https://www.npmjs.com/package/@logsnag/vue"><img src="https://img.shields.io/npm/v/@logsnag/vue" alt="NPM Version"></a>
	<a href="https://discord.gg/dY3pRxgWua"><img src="https://img.shields.io/discord/922560704454750245?color=%237289DA&label=Discord" alt="Discord"></a>
	<a href="https://docs.logsnag.com"><img src="https://img.shields.io/badge/Docs-LogSnag" alt="Documentation"></a>
	<br>
	<br>
</div>

## Installation

### Using npm

```bash
npm install @logsnag/vue
```

### Using yarn

```bash
yarn add @logsnag/vue
```

### Using pnpm

```bash
pnpm add @logsnag/vue
```


## Usage

First, install the LogSnag plugin in your Vue application:

> Set your token's scope to `public` in the LogSnag dashboard.

```typescript
import { createApp } from 'vue';
import LogSnag from '@logsnag/vue';

const app = createApp(App);

app.use(LogSnag, {
  token: '<TOKEN>',
  project: '<PROJECT_NAME>'
});

app.mount('#app');
```

Then, import the functions you need from the package:

```typescript
import { setUserId, track, identify } from "@logsnag/vue";

// Set the user id for the current user
setUserId('user-123');

// Track an event
track({
  channel: "payments",
  event: "New Subscription",
  user_id: "user-123",
  icon: "💰",
  notify: true,
  tags: {
    plan: "premium",
    cycle: "monthly",
    trial: false
  }
});

// Identify a user
identify({
  user_id: "user-123",
  properties: {
    name: "John Doe",
    email: "john@doe.com",
    plan: "premium",
  }
});
```

You can also track events directly from HTML elements using data attributes:

```html
<button
    data-event="Upgraded Plan" 
    data-channel="billing"
    data-icon=":moneybag:"
    data-tag-plan="Pro"
    data-tag-period="Monthly"
    data-tag-price="9.99"
>
    Upgrade to Pro
</button>
```

In this example, when the button is clicked, an event named "Upgraded Plan" will be tracked with the specified tags.

## Hooks

- `track(options: TrackOptions)`: Track custom events.
- `identify(options: IdentifyOptions)`: Identify user traits.
- `setUserId(userId: string | null)`: Set the user id for the current user. If the user is not logged in, pass null.
- `clearUserId()`: Clear the user id for the current user.
- `setDebug(flag: boolean = true)`: Set debug mode for logging.

## API Documentation

For more information about the LogSnag API, see: [docs.logsnag.com](https://docs.logsnag.com)

## Support

If you encounter any problems or issues, please contact us at [shayan@logsnag.com](mailto:shayan@logsnag.com)
npm package: @logspot/node
Description: Logspot Node SDK
Author: Logspot
Latest version: 2.1.0

# @logspot/node

Logspot Node SDK for Node.js application.

## Installation

```npm install @logspot/node```

or

```yarn add @logspot/node```

## Usage

### Init


```js
import Logspot from '@logspot/node';

Logspot.init({ secretKey: 'YOUR_SECRET_KEY' });
```

### Track

```js
Logspot.track({ 
    event: 'UserSubscribed', 
    notify: true,
    message: 'john@doe.com has subscribed',
    userId: 'john@doe.com', 
    metadata: { additionalData: '123' } 
});
```
npm package: @logspot/web
Description: Logspot Web SDK
Author: Logspot
Latest version: 5.1.1

# @logspot/web

Logspot SDK for browser applications built with React, Next.js, Angular, etc.

## Installation

`npm install @logspot/web`

or

`yarn add @logspot/web`

## Usage

### Init

```js
import Logspot from "@logspot/web";

Logspot.init({ publicKey: "YOUR_PUBLIC_KEY", cookiesDisabled: true });
```

- `publicKey` - project public key
- `cookiesDisabled` - use this property to disable anonymous user tracking
- `enableAutoPageviews` - enable auto tracking of pageviews (default: true)
- `stickyCampaigns` - enable storing UTM parameters in cookies (default: true)
- `stickyCampaignsExpirationInSeconds` - timeout for sticky campaigns (default: 7 days)
- `enableAutoClicks` - enable auto capture of user clicks (default: false)
- `externalApiUrl` - provide here API proxy url
- `onLoad` - use this function to perform actions when Logspot is loaded. E.g. register super properties before initial pageview

### Track

```js
Logspot.track({
  event: "UserSubscribed",
  channel: "Sign ups",
  notify: true,
  message: "john@doe.com has subscribed",
  userId: "john@doe.com",
  metadata: { additionalData: "123" },
});
```

### Pageview

```js
Logspot.pageview({
  userId: "john@doe.com",
  metadata: { additionalData: "123" },
});
```

### Register

```js
Logspot.register({
  email: "john@doe.com",
  authenticated: true,
  project: "SuperStartup",
});
```
npm package: @logstitch/viewer
Description: Embeddable audit log viewer component for LogStitch
Latest version: 0.1.0

# @logstitch/viewer

Embeddable audit log viewer component for [LogStitch](https://logstitch.io). Drop a fully-featured event log into your app with a single React component.

## Install

```bash
npm install @logstitch/viewer
```

## Quick Start

```tsx
import { LogViewer } from '@logstitch/viewer';

function AuditLogPage({ viewerToken }: { viewerToken: string }) {
  return (
    <LogViewer
      token={viewerToken}
      theme="dark"
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `token` | `string` | **required** | Viewer token (`vt_...`) from the API |
| `baseUrl` | `string` | `https://api.logstitch.io` | API base URL |
| `theme` | `'light' \| 'dark' \| Theme` | `'light'` | Color theme |
| `pageSize` | `number` | `25` | Events per page |
| `onError` | `(error: Error) => void` | — | Error callback |

## Generating Viewer Tokens

Use the LogStitch SDK or API to create a viewer token scoped to a tenant:

```ts
import { LogStitch } from '@logstitch/sdk';

const client = new LogStitch({ projectKey: 'pk_...' });
const { token } = await client.viewerTokens.create({
  tenant_id: 'tenant_abc',
});
// Pass `token` to your frontend
```

## Custom Themes

Pass a theme object to customize colors:

```tsx
<LogViewer
  token={viewerToken}
  theme={{
    bg: '#1a1a2e',
    text: '#eaeaea',
    accent: '#e94560',
    border: '#333',
  }}
/>
```

See `Theme` type for all available properties.

## Features

- Filter by action, category, date range, and search text
- Click rows to expand full event detail (actor, target, context, metadata, changes)
- CSV export
- Cursor-based pagination with "Load more"
- Loading skeleton, empty state, and error states with retry
- Light and dark themes with full customization
- Zero runtime dependencies (React is a peer dependency)
- ESM and CJS dual output

## License

MIT
npm package: @logtail/next
Description: Better Stack Telemetry Next.js client
Author: Better Stack
Latest version: 0.3.1

# [Better Stack](https://betterstack.com/logs) Next.js client

📣 Logtail is now part of Better Stack. [Learn more ⇗](https://betterstack.com/press/introducing-better-stack/)

[![Better Stack dashboard](https://github.com/logtail/logtail-python/assets/10132717/e2a1196b-7924-4abc-9b85-055e17b5d499)](https://betterstack.com/logs)

[![MIT License](https://img.shields.io/badge/license-MIT-ff69b4.svg)](https://github.com/logtail/logtail-nextjs/blob/master/LICENSE.md)
[![npm @logtail/next](https://img.shields.io/npm/v/@logtail/next?color=success&label=npm%20%40logtail%2Fnext)](https://www.npmjs.com/package/@logtail/next)
[![CI](https://github.com/logtail/logtail-nextjs/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/logtail/logtail-nextjs/actions/workflows/ci.yml)

Experience SQL-compatible structured log management based on ClickHouse. [Learn more ⇗](https://logtail.com/)

## Documentation

- [Running on Vercel ⇗](https://betterstack.com/docs/logs/vercel/)
- [Running elsewhere  ⇗](https://betterstack.com/docs/logs/javascript/nextjs/)

## Need help?
Please let us know at [hello@betterstack.com](mailto:hello@betterstack.com). We're happy to help!

---

[MIT license](https://github.com/logtail/logtail-nextjs/blob/master/LICENSE.md)
npm package: @logtape/config
Description: Configure LogTape from plain objects (JSON, YAML, TOML)
Author: Hong Minhee
Latest version: 2.0.5

@logtape/config
===============

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

This package provides functionality to configure [LogTape] from plain objects,
such as those loaded from JSON or YAML files.

[JSR badge]: https://jsr.io/badges/@logtape/config
[JSR]: https://jsr.io/@logtape/config
[npm badge]: https://img.shields.io/npm/v/@logtape/config?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/config
[LogTape]: https://logtape.org/


Installation
------------

The package is available on [JSR] and [npm]:

~~~~ sh
deno add jsr:@logtape/config
npm  add     @logtape/config
pnpm add     @logtape/config
yarn add     @logtape/config
bun  add     @logtape/config
~~~~


Usage
-----

You can configure LogTape using a plain object:

~~~~ typescript
import { configureFromObject } from "@logtape/config";
import { readFile } from "node:fs/promises";

const config = JSON.parse(await readFile("./logtape.json", "utf-8"));
await configureFromObject(config);
~~~~

For more details, see the [Configuration from objects] section in the LogTape
manual.

[Configuration from objects]: https://logtape.org/manual/config#configuration-from-objects
npm package: @logtape/drizzle-orm
Description: Drizzle ORM adapter for LogTape logging library
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

@logtape/drizzle-orm
====================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

*@logtape/drizzle-orm* is a [Drizzle ORM] adapter that allows you to use
[LogTape] as Drizzle's logging backend for database query logging.  This
enables seamless integration between Drizzle ORM applications and LogTape's
structured logging capabilities.

[JSR badge]: https://jsr.io/badges/@logtape/drizzle-orm
[JSR]: https://jsr.io/@logtape/drizzle-orm
[npm badge]: https://img.shields.io/npm/v/@logtape/drizzle-orm?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/drizzle-orm
[Drizzle ORM]: https://orm.drizzle.team/
[LogTape]: https://logtape.org/


Installation
------------

~~~~ sh
deno add jsr:@logtape/drizzle-orm  # for Deno
npm  add     @logtape/drizzle-orm  # for npm
pnpm add     @logtape/drizzle-orm  # for pnpm
yarn add     @logtape/drizzle-orm  # for Yarn
bun  add     @logtape/drizzle-orm  # for Bun
~~~~


Usage
-----

~~~~ typescript
import { configure, getConsoleSink } from "@logtape/logtape";
import { getLogger } from "@logtape/drizzle-orm";
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

await configure({
  sinks: { console: getConsoleSink() },
  loggers: [
    { category: ["drizzle-orm"], sinks: ["console"], lowestLevel: "debug" }
  ],
});

const client = postgres(process.env.DATABASE_URL!);
const db = drizzle(client, {
  logger: getLogger(),
});

// Now all database queries will be logged through LogTape
~~~~


Custom category
---------------

You can specify a custom category for the logger:

~~~~ typescript
const db = drizzle(client, {
  logger: getLogger({
    category: ["myapp", "database"],
  }),
});
~~~~


Custom log level
----------------

By default, queries are logged at the `debug` level.  You can change this:

~~~~ typescript
const db = drizzle(client, {
  logger: getLogger({
    level: "info",
  }),
});
~~~~


Structured logging
------------------

The adapter logs queries with structured data that includes:

 -  `formattedQuery`: The query with parameter placeholders (e.g., `$1`, `$2`)
    replaced with actual values for easier reading
 -  `query`: The original query string with placeholders
 -  `params`: The original parameters array

This allows you to:

 -  Get human-readable output with text formatters
 -  Get machine-parseable output with JSON Lines formatter
 -  Use full query and params data with OpenTelemetry, Sentry, and other sinks


Docs
----

The docs of this package is available at
<https://logtape.org/manual/integrations#drizzle-orm>.
For the API references, see <https://jsr.io/@logtape/drizzle-orm/doc>.
npm package: @logtape/express
Description: Express adapter for LogTape logging library
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

@logtape/express
================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

*@logtape/express* is an [Express] middleware adapter that provides HTTP
request logging using [LogTape] as the backend, as an alternative to [Morgan].

[JSR badge]: https://jsr.io/badges/@logtape/express
[JSR]: https://jsr.io/@logtape/express
[npm badge]: https://img.shields.io/npm/v/@logtape/express?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/express
[Express]: https://expressjs.com/
[LogTape]: https://logtape.org/
[Morgan]: https://github.com/expressjs/morgan


Installation
------------

~~~~ sh
deno add jsr:@logtape/express  # for Deno
npm  add     @logtape/express  # for npm
pnpm add     @logtape/express  # for pnpm
yarn add     @logtape/express  # for Yarn
bun  add     @logtape/express  # for Bun
~~~~


Usage
-----

~~~~ typescript
import { configure, getConsoleSink } from "@logtape/logtape";
import { expressLogger } from "@logtape/express";
import express from "express";

await configure({
  sinks: { console: getConsoleSink() },
  loggers: [
    { category: ["express"], sinks: ["console"], lowestLevel: "info" }
  ],
});

const app = express();
app.use(expressLogger());

app.get("/", (req, res) => {
  res.json({ hello: "world" });
});

app.listen(3000);
~~~~


Options
-------

~~~~ typescript
app.use(expressLogger({
  category: ["myapp", "http"],  // Custom category (default: ["express"])
  level: "debug",                // Log level (default: "info")
  format: "dev",                 // Predefined format (default: "combined")
  skip: (req, res) => res.statusCode < 400,  // Skip successful requests
  immediate: false,              // Log after response (default)
}));
~~~~


Predefined formats
------------------

 -  **combined**: Apache Combined Log Format with all properties (default)
 -  **common**: Apache Common Log Format (without referrer/userAgent)
 -  **dev**: Concise output for development (`GET /path 200 1.234 ms - 123`)
 -  **short**: Shorter format with remote address
 -  **tiny**: Minimal output


Custom format function
----------------------

~~~~ typescript
app.use(expressLogger({
  format: (req, res, responseTime) => ({
    method: req.method,
    path: req.path,
    status: res.statusCode,
    duration: responseTime,
    user: req.user?.id,
  }),
}));
~~~~


Docs
----

The docs of this package is available at
<https://logtape.org/manual/integrations#express>.
For the API references, see <https://jsr.io/@logtape/express/doc>.
npm package: @logtape/fastify
Description: Fastify adapter for LogTape logging library
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

@logtape/fastify
================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

*@logtape/fastify* is a [Pino]-compatible logger adapter that allows you to use
[LogTape] as [Fastify]'s logging backend.  This enables seamless integration
between Fastify applications and LogTape's structured logging capabilities.

[JSR badge]: https://jsr.io/badges/@logtape/fastify
[JSR]: https://jsr.io/@logtape/fastify
[npm badge]: https://img.shields.io/npm/v/@logtape/fastify?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/fastify
[Pino]: https://getpino.io/
[LogTape]: https://logtape.org/
[Fastify]: https://fastify.dev/


Installation
------------

~~~~ sh
deno add jsr:@logtape/fastify  # for Deno
npm  add     @logtape/fastify  # for npm
pnpm add     @logtape/fastify  # for pnpm
yarn add     @logtape/fastify  # for Yarn
bun  add     @logtape/fastify  # for Bun
~~~~


Usage
-----

~~~~ typescript
import { configure, getConsoleSink } from "@logtape/logtape";
import { getLogTapeFastifyLogger } from "@logtape/fastify";
import Fastify from "fastify";

await configure({
  sinks: { console: getConsoleSink() },
  loggers: [
    { category: ["fastify"], sinks: ["console"], lowestLevel: "info" }
  ],
});

const fastify = Fastify({
  loggerInstance: getLogTapeFastifyLogger(),
});

fastify.get("/", async (request, reply) => {
  request.log.info("Handling request");
  return { hello: "world" };
});

await fastify.listen({ port: 3000 });
~~~~


Custom category
---------------

You can specify a custom category for the logger:

~~~~ typescript
const fastify = Fastify({
  loggerInstance: getLogTapeFastifyLogger({
    category: ["myapp", "http"],
  }),
});
~~~~


Docs
----

The docs of this package is available at
<https://logtape.org/manual/integrations#fastify>.
For the API references, see <https://jsr.io/@logtape/fastify/doc>.
npm package: @logtape/file
Description: File sink and rotating file sink for LogTape
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

File sinks for LogTape
======================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

This package provides file sinks for [LogTape].  You can use the file sinks to
write log records to files.  For details, read the docs:

 -  [File sink]
 -  [Rotating file sink]

[JSR badge]: https://jsr.io/badges/@logtape/file
[JSR]: https://jsr.io/@logtape/file
[npm badge]: https://img.shields.io/npm/v/@logtape/file?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/file
[LogTape]: https://logtape.org/
[File sink]: https://logtape.org/sinks/file
[Rotating file sink]: https://logtape.org/sinks/file#rotating-file-sink


Installation
------------

This package is available on [JSR] and [npm].  You can install it for various
JavaScript runtimes and package managers:

~~~~ sh
deno add jsr:@logtape/file  # for Deno
npm  add     @logtape/file  # for npm
pnpm add     @logtape/file  # for pnpm
yarn add     @logtape/file  # for Yarn
bun  add     @logtape/file  # for Bun
~~~~


Docs
----

The docs of this package is available at <https://logtape.org/sinks/file>.
For the API references, see <https://jsr.io/@logtape/file>.
npm package: @logtape/hono
Description: Hono adapter for LogTape logging library
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

@logtape/hono
=============

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

This package provides [Hono] middleware for HTTP request logging using
[LogTape] as the backend, as an alternative to Hono's built-in logger
middleware.

[JSR badge]: https://jsr.io/badges/@logtape/hono
[JSR]: https://jsr.io/@logtape/hono
[npm badge]: https://img.shields.io/npm/v/@logtape/hono?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/hono
[Hono]: https://hono.dev/
[LogTape]: https://logtape.org/


Installation
------------

~~~~ sh
deno add jsr:@logtape/hono  # for Deno
npm  add     @logtape/hono  # for npm
pnpm add     @logtape/hono  # for pnpm
yarn add     @logtape/hono  # for Yarn
bun  add     @logtape/hono  # for Bun
~~~~


Usage
-----

~~~~ typescript
import { Hono } from "hono";
import { configure, getConsoleSink } from "@logtape/logtape";
import { honoLogger } from "@logtape/hono";

await configure({
  sinks: { console: getConsoleSink() },
  loggers: [
    { category: ["hono"], sinks: ["console"], lowestLevel: "info" }
  ],
});

const app = new Hono();
app.use(honoLogger());

app.get("/", (c) => c.json({ hello: "world" }));

export default app;
~~~~


Options
-------

The `honoLogger()` function accepts an optional options object:

~~~~ typescript
app.use(honoLogger({
  category: ["myapp", "http"],  // Custom category (default: ["hono"])
  level: "debug",                // Log level (default: "info")
  format: "dev",                 // Predefined format (default: "combined")
  skip: (c) => c.req.path === "/health",  // Skip logging for specific paths
  logRequest: true,              // Log at request start (default: false)
}));
~~~~


Predefined formats
------------------

The middleware supports Morgan-compatible predefined formats:

 -  `"combined"`: Apache Combined Log Format with all properties (default)
 -  `"common"`: Apache Common Log Format (without referrer/userAgent)
 -  `"dev"`: Concise output for development (e.g., `GET /path 200 1.234 ms - 123`)
 -  `"short"`: Shorter format with remote address
 -  `"tiny"`: Minimal output


Custom format function
----------------------

You can also provide a custom format function:

~~~~ typescript
app.use(honoLogger({
  format: (c, responseTime) => ({
    method: c.req.method,
    path: c.req.path,
    status: c.res.status,
    duration: responseTime,
  }),
}));
~~~~


Structured logging output
-------------------------

When using the `"combined"` format (default), the middleware logs structured
data that includes:

 -  `method`: HTTP request method
 -  `url`: Request URL
 -  `path`: Request path
 -  `status`: HTTP response status code
 -  `responseTime`: Response time in milliseconds
 -  `contentLength`: Response content-length header value
 -  `userAgent`: User-Agent header value
 -  `referrer`: Referrer header value


See also
--------

For more information, see the [LogTape documentation][LogTape].
npm package: @logtape/koa
Description: Koa adapter for LogTape logging library
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

@logtape/koa: Koa adapter for LogTape
=====================================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

This package provides [Koa] middleware for HTTP request logging using [LogTape]
as the backend. It serves as an alternative to [koa-logger] with structured
logging support.

[JSR badge]: https://jsr.io/badges/@logtape/koa
[JSR]: https://jsr.io/@logtape/koa
[npm badge]: https://img.shields.io/npm/v/@logtape/koa?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/koa
[Koa]: https://koajs.com/
[LogTape]: https://logtape.org/
[koa-logger]: https://github.com/koajs/logger


Installation
------------

~~~~ sh
deno add jsr:@logtape/koa  # Deno
npm add @logtape/koa       # npm
pnpm add @logtape/koa      # pnpm
yarn add @logtape/koa      # Yarn
bun add @logtape/koa       # Bun
~~~~


Usage
-----

~~~~ typescript
import Koa from "koa";
import { configure, getConsoleSink } from "@logtape/logtape";
import { koaLogger } from "@logtape/koa";

await configure({
  sinks: { console: getConsoleSink() },
  loggers: [
    { category: ["koa"], sinks: ["console"], lowestLevel: "info" }
  ],
});

const app = new Koa();

// Basic usage - should be used near the top of middleware stack
app.use(koaLogger());

app.use((ctx) => {
  ctx.body = { hello: "world" };
});

app.listen(3000);
~~~~


Options
-------

~~~~ typescript
app.use(koaLogger({
  category: ["myapp", "http"],  // Custom category (default: ["koa"])
  level: "debug",                // Log level (default: "info")
  format: "dev",                 // Predefined format (default: "combined")
  skip: (ctx) => ctx.path === "/health",  // Skip health check endpoint
  logRequest: false,             // Log after response (default: false)
}));
~~~~


Predefined formats
------------------

 -  `"combined"` - Apache Combined Log Format with all properties (default)
 -  `"common"` - Apache Common Log Format (without referrer/userAgent)
 -  `"dev"` - Concise output for development
 -  `"short"` - Shorter format with remote address
 -  `"tiny"` - Minimal output


Custom format
-------------

~~~~ typescript
app.use(koaLogger({
  format: (ctx, responseTime) => ({
    method: ctx.method,
    path: ctx.path,
    status: ctx.status,
    duration: responseTime,
  }),
}));
~~~~


License
-------

Distributed under the MIT License.  See the *LICENSE* file for details.
npm package: @logtape/redaction
Description: Redact sensitive data from log messages
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

Data redaction for LogTape
==========================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

This package provides data redaction for [LogTape].  You can redact sensitive
data in log records.  For details, read the docs:

 -  [Pattern-based redaction]
 -  [Field-based redaction]

[JSR badge]: https://jsr.io/badges/@logtape/redaction
[JSR]: https://jsr.io/@logtape/redaction
[npm badge]: https://img.shields.io/npm/v/@logtape/redaction?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/redaction
[LogTape]: https://logtape.org/
[Pattern-based redaction]: https://logtape.org/manual/redaction#pattern-based-redaction
[Field-based redaction]: https://logtape.org/manual/redaction#field-based-redaction


Installation
------------

This package is available on [JSR] and [npm].  You can install it for various
JavaScript runtimes and package managers:

~~~~ sh
deno add jsr:@logtape/redaction  # for Deno
npm  add     @logtape/redaction  # for npm
pnpm add     @logtape/redaction  # for pnpm
yarn add     @logtape/redaction  # for Yarn
bun  add     @logtape/redaction  # for Bun
~~~~


Docs
----

The docs of this package is available at
<https://logtape.org/manual/redaction>. For the API references, see
<https://jsr.io/@logtape/redaction>.
npm package: @logtape/sentry
Description: LogTape Sentry sink
Author: Hong Minhee
Latest version: 2.0.5

@logtape/sentry: LogTape Sentry Sink
====================================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]
[![GitHub Actions][GitHub Actions badge]][GitHub Actions]

This package provides a [Sentry] sink for [LogTape]. It allows you to
capture your LogTape logs and send them to Sentry.

![LogTape records show up in the breadcrumbs of a Sentry issue.](https://raw.githubusercontent.com/dahlia/logtape/refs/heads/main/screenshots/sentry.png)

[JSR badge]: https://jsr.io/badges/@logtape/sentry
[JSR]: https://jsr.io/@logtape/sentry
[npm badge]: https://img.shields.io/npm/v/@logtape/sentry?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/sentry
[GitHub Actions badge]: https://github.com/dahlia/logtape/actions/workflows/main.yaml/badge.svg
[GitHub Actions]: https://github.com/dahlia/logtape/actions/workflows/main.yaml
[Sentry]: https://sentry.io/
[LogTape]: https://logtape.org/


Installation
------------

This package is available on [JSR] and [npm]. You can install it for various
JavaScript runtimes and package managers:

~~~~ sh
deno add jsr:@logtape/sentry  # for Deno
npm  add     @logtape/sentry  # for npm
pnpm add     @logtape/sentry  # for pnpm
yarn add     @logtape/sentry  # for Yarn
bun  add     @logtape/sentry  # for Bun
~~~~

You'll also need to install a Sentry SDK for your runtime:

~~~~ sh
# Node.js
npm add @sentry/node

# Deno (requires both packages at same version)
deno add npm:@sentry/deno npm:@sentry/core

# Bun
bun add @sentry/bun
~~~~


Docs
----

The documentation for this package is available at
<https://logtape.org/sinks/sentry>.

For API references, see <https://jsr.io/@logtape/sentry>.
npm package: @logtape/syslog
Description: Syslog sink for LogTape
Author: Hong Minhee
Latest version: 2.0.5

<!-- deno-fmt-ignore-file -->

LogTape syslog sink
===================

[![JSR][JSR badge]][JSR]
[![npm][npm badge]][npm]

Syslog sink for [LogTape]. This package provides a syslog sink that sends log
messages to a syslog server following the [RFC 5424] specification.

[JSR badge]: https://jsr.io/badges/@logtape/syslog
[JSR]: https://jsr.io/@logtape/syslog
[npm badge]: https://img.shields.io/npm/v/@logtape/syslog?logo=npm
[npm]: https://www.npmjs.com/package/@logtape/syslog
[LogTape]: https://logtape.org/
[RFC 5424]: https://tools.ietf.org/rfc/rfc5424.txt


Features
--------

 -  *RFC 5424 compliant*: Follows the official syslog protocol specification
 -  *Multiple transports*: Supports both UDP and TCP protocols
 -  *Cross-runtime*: Works on Deno, Node.js, and Bun
 -  *Non-blocking*: Asynchronous message sending with proper cleanup
 -  *Configurable*: Extensive configuration options for facility, hostname, etc.
 -  *Structured logging*: Optional structured data support
 -  *Zero dependencies*: No external dependencies


Installation
------------

This package is available on [JSR] and [npm].  You can install it for various
JavaScript runtimes and package managers:

~~~~ sh
deno add jsr:@logtape/syslog  # for Deno
npm  add     @logtape/syslog  # for npm
pnpm add     @logtape/syslog  # for pnpm
yarn add     @logtape/syslog  # for Yarn
bun  add     @logtape/syslog  # for Bun
~~~~


Docs
----

The docs of this package is available at
<https://logtape.org/sinks/syslog>. For the API references,
see <https://jsr.io/@logtape/syslog>.
npm package: @logtheman/ui
Description: Accessible, themable React UI primitives.
Latest version: 0.1.3

# @logtheman/ui

Accessible, themable React UI primitives with zero-runtime CSS variables.

## Installation

```bash
npm install @logtheman/ui
# or
pnpm add @logtheman/ui
# or
yarn add @logtheman/ui
```

## Usage

```tsx
import { Button, TextField } from '@logtheman/ui';
import '@logtheman/ui/src/styles/base.css';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <TextField label="Email" placeholder="you@example.com" />
    </div>
  );
}
```

## Components

- Button
- TextField
- Link
- Text, H1-H5
- Switch
- RadioGroup, Radio
- Select
- TimeInput
- Tabs, Tab
- DatePicker
- DateRangePicker
- RangeCalendar
- Card, CardHeader, CardBody, CardFooter
- Badge
- Alert
- Checkbox, CheckboxGroup
- Modal, ModalContent, ModalHeader, ModalBody, ModalFooter
- Tooltip
- Spinner
- Progress, CircularProgress
- Divider
- Avatar
- Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter
- Popover, PopoverContent, PopoverTrigger
- Typography

## Requirements

- React >= 18
- React DOM >= 18

## License

MIT
npm package: @logthm/koishi-plugin-cr
Description: [![npm](https://img.shields.io/npm/v/@logthm/koishi-plugin-cr?style=flat-square)](https://www.npmjs.com/package/@logthm/koishi-plugin-cr)
Latest version: 1.0.8

# koishi-plugin-cr

[![npm](https://img.shields.io/npm/v/@logthm/koishi-plugin-cr?style=flat-square)](https://www.npmjs.com/package/@logthm/koishi-plugin-cr)
npm package: @logthm/koishi-plugin-help
Description: 自用的help
Latest version: 0.0.2

# @logthm/koishi-plugin-help

[![npm](https://img.shields.io/npm/v/@logthm/koishi-plugin-help?style=flat-square)](https://www.npmjs.com/package/@logthm/koishi-plugin-help)

自用的help
npm package: @logto/browser
Description: [![Version](https://img.shields.io/npm/v/@logto/browser)](https://www.npmjs.com/package/@logto/browser) [![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml) [![Co
Latest version: 3.0.13

# Logto JS Browser SDK

[![Version](https://img.shields.io/npm/v/@logto/browser)](https://www.npmjs.com/package/@logto/browser)
[![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
[![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)

The Logto JavaScript Browser SDK written in TypeScript.

Check out our [docs](https://docs.logto.io/sdk/vanilla-js/) for more information.

## Installation

### Using npm

```bash
npm install @logto/browser
```

### Using yarn

```bash
yarn add @logto/browser
```

### Using pnpm

```bash
pnpm add @logto/browser
```

## What is this and how does it work?

As the name suggests, Logto browser SDK is the foundation of all Logto SDKs that run in a browser environment (Vanilla, React, Vue, etc.). `@logto/browser` extends `@logto/client` and provides a browser specific implementation of the client adapters:

* Implements `Storage` by using browser `localStorage` and `sessionStorage`.
* Implements `navigate` method by using `window.location.href`.

Usually you are not expected to use it directly in your application, but instead choosing a framework specific SDK that built on top of it. We have already released a set of official SDKs to accelerate your integration. [Check this out](https://docs.logto.io/sdk/) and get started!

If Logto does not support your front-end framework and you want to create your own SDK from scratch, we recommend checking out the [SDK convention](https://docs.logto.io/docs/references/sdk-convention/) first. You can also refer to our [React SDK](https://github.com/logto-io/js/tree/master/packages/react) and [Vue SDK](https://github.com/logto-io/js/tree/master/packages/vue) to learn more about the implementation details.

## Resources

[![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/)
[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)
npm package: @logto/capacitor
Description: [![Version](https://img.shields.io/npm/v/@logto/capacitor)](https://www.npmjs.com/package/@logto/capacitor) [![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml) [
Latest version: 4.0.6

# Logto JS Capacitor SDK
[![Version](https://img.shields.io/npm/v/@logto/capacitor)](https://www.npmjs.com/package/@logto/capacitor)
[![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
[![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)

The Logto JavaScript Capacitor SDK written in TypeScript.

## Installation

### Using npm

```bash
npm install @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
```

### Using yarn

```bash
yarn add @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
```

### Using pnpm

```bash
pnpm add @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
```

## What is this and how does it work?

See [Integrate Logto in your application](https://docs.logto.io/docs/recipes/integrate-logto/) for more information.

## Resources

[![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/sdk/JavaScript/browser/)
[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)
npm package: @logto/chrome-extension
Description: Logto Chrome extension SDK
Latest version: 0.1.27

# Logto Chrome extension SDK

[![Version](https://img.shields.io/npm/v/@logto/chrome-extension)](https://www.npmjs.com/package/@logto/browser)
[![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)

The Logto Chrome extension SDK written in TypeScript.

Check out our [docs](https://docs.logto.io/sdk/chrome-extension/) for more information; a sample project can be found at [here](../chrome-extension-sample/).

> [!Note]
> This package is ESM-only.

## Installation

### Using npm

```bash
npm install @logto/chrome-extension
```

### Using yarn

```bash
yarn add @logto/chrome-extension
```

### Using pnpm

```bash
pnpm add @logto/chrome-extension
```

## Resources

[![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/)
[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)
npm package: @logto/client
Description: [![Version](https://img.shields.io/npm/v/@logto/client)](https://www.npmjs.com/package/@logto/client) [![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml) [![Code
Latest version: 3.1.8

# Logto Client SDK
[![Version](https://img.shields.io/npm/v/@logto/client)](https://www.npmjs.com/package/@logto/client)
[![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
[![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)

The Logto JavaScript Client SDK written in TypeScript.

## Installation

### Using npm

```bash
npm install @logto/client
```

### Using yarn

```bash
yarn add @logto/client
```

### Using pnpm

```bash
pnpm add @logto/client
```

## What is this and how does it work?

Logto JavaScript Client SDK is platformless, and is the foundation of the other platform's SDKs (Browser, Next.js, React, Vue, etc.). Usually you are not expected to use it directly in your application, as we have released a set of official SDKs to help you integrate Logto with your favorite JavaScript frameworks. [Check this out](https://docs.logto.io/docs/recipes/integrate-logto/) and get started!

If Logto does not support your framework and you want to contribute by building a new SDK, we recommend checking out our [Browser SDK](https://github.com/logto-io/js/tree/master/packages/browser) and [Node.js SDK](https://github.com/logto-io/js/tree/master/packages/node) and start from there.

### Adapters

To implement a platform-specific SDK, you should implement the following adapters:

1. requester: send http requests.
2. storage: save tokens and other info.
3. navigate: handle redirect.
4. generateState: generate state.
5. generateCodeVerifier: generate code verifier.
6. generateCodeChallenge: generate code challenge.

See the [adapters](./src/adapter/index.ts) for more information.

## Resources

[![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/sdk/JavaScript/client/)
[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)