# @holochain-syn/core

> Contexts and Lit elements for building syn Holochain applications

Latest version **0.701.0** (published 2026-10-16) · CAL-1.0 license · 0 weekly downloads

## Install

```sh
npm install @holochain-syn/core
pnpm add @holochain-syn/core
yarn add @holochain-syn/core
bun add @holochain-syn/core
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.701.0 |
| Published | 2026-10-16 |
| First published | 2022-08-13 |
| Weekly downloads | 0 |
| License | CAL-1.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 97 |
| Maintainers | guillem.cordoba, zippy314, leosprograms |

## Links

- npm: https://www.npmjs.com/package/@holochain-syn/core
- Repository: https://github.com/holochain-apps/syn
- Homepage: https://github.com/holochain-apps/syn#readme
- Issues: https://github.com/holochain-apps/syn/issues
- npm.io page: https://npm.io/package/@holochain-syn/core

## Recent versions

- 0.701.0 (latest) — 2026-10-16
- 0.300.0-dev.0 (dev) — 2024-03-19
- 0.700.1 — 2026-08-11
- 0.700.0 — 2026-08-07
- 0.603.0 — 2026-08-07
- 0.601.4 — 2026-06-12
- 0.601.3 — 2026-03-24
- 0.601.2 — 2026-03-24
- 0.601.1 — 2026-03-20
- 0.601.0 — 2026-02-28
- 0.600.0 — 2025-12-05
- 0.600.0-rc.2 — 2025-11-26
- 0.600.0-rc.1 — 2025-11-26
- 0.600.0-rc.0 — 2025-11-23
- 0.600.0-dev.7 — 2025-11-13
- … 67 more at https://npm.io/package/@holochain-syn/core/versions

## README

# @holochain-syn/core

Core package to easily build `syn` Holochain applications.

## Installing

Install the necessary dependencies:

```bash
npm install @holochain-open-dev/profiles @holochain-syn/core
```

**Note:** Syn uses Automerge, which depends on WebAssembly (WASM). Some build tools and bundlers require additional configuration to properly handle WASM modules.

**For Vite users:**
Add the WASM plugin to your development dependencies in `package.json`:
```json
{
  "devDependencies": {
    "vite-plugin-wasm": "^3.5.0"
  }
}
```

Configure the plugin in your `vite.config.ts`:
```ts
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';

export default defineConfig({
  plugins: [wasm()],
});
```

## Usage

First, you need to have instantiated a `SynStore` from [@holochain-syn/store](https://npmjs.com/package/@holochain-syn/store) and a `ProfilesStore` from [@holochain-open-dev/profiles](https://holochain-open-dev.github.io/profiles/guides/frontend/profiles-store/).

### Defining the Context Providers

```ts
// Define the <profiles-context> element
import '@holochain-open-dev/profiles/dist/elements/profiles-context.js';

// Define the <syn-context> element
import '@holochain-syn/core/dist/elements/syn-context.js';
```

Now define the `<profiles-context>` and the `<syn-context>` element and add them to your html, wrapping the whole section of your page in which you are going to be placing syn elements:

```html
<profiles-context id="profiles-context"> 
  <syn-context>
    <!-- The rest of your application goes here -->
  </syn-context>
</profiles-context>
```

### Connect the Store to the Context Providers

Go to [this page](https://holochain-open-dev.github.io/reusable-modules/frontend/frameworks/), select the framework you are using, and follow its example in order to:

- Connect the `ProfilesStore` to the `<profiles-context>` with `id="profiles-context"`.
- Connect the `SynStore` to the `<syn-context>`.

## Elements

Import each element from its `dist/elements/` path to define it:

| Element | What it does |
| --- | --- |
| `<syn-context>` | Provides the `SynStore` to everything inside it |
| `<syn-document-context>` | Provides a `DocumentStore` for a given document hash |
| `<syn-workspace-context>` | Provides a `WorkspaceStore` for a given workspace hash |
| `<syn-session-context>` | Provides a joined `SessionStore` |
| `<commit-history>` | Renders the commit graph for a document |
| `<session-participants>` | Renders the agents currently in a session |
| `<workspace-session-participants>` | Same, scoped to a workspace |

This package also re-exports everything from [@holochain-syn/store](https://npmjs.com/package/@holochain-syn/store) and [@holochain-syn/client](https://npmjs.com/package/@holochain-syn/client), so a UI can depend on `@holochain-syn/core` alone.

For a working app built on these pieces, see the [SynText demo](https://github.com/holochain-apps/syn/tree/main/demo).

---
_Source: https://npm.io/package/@holochain-syn/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._