artalar · krulod · Nov 18, 2023 · Dec 4, 2023 · Dec 10, 2023 · May 22, 2024
diff --git a/README.md b/README.md
diff --git a/docs/.astro/types.d.ts b/docs/.astro/types.d.ts
diff --git a/...ontent/docs/blog/what-is-state-manager.md → ...s/fundamentals/what-is-a-state-manager.md b/...ontent/docs/blog/what-is-state-manager.md → ...s/fundamentals/what-is-a-state-manager.md
diff --git a/docs/src/content/docs/getting-started/setup.md b/docs/src/content/docs/getting-started/setup.md
@@ -5,107 +5,35 @@ sidebar:
   order: 1
 ---
 
-Reatom is a framework-agnostic state manager, and you can use it with various adapters for different frameworks. This guide provides a common usage with React.js, as it is the most commonly used view library currently.
+## Start from React template 
 
-## Create new project from template
+Here is a minimal project template with TypeScript, Vite, React and Reatom: [`reatom-react-ts`](https://artalar/reatom-react-ts/).
 
-The base template project includes Vite, TypeScript, React and Reatom ecosystem: https://github.com/artalar/reatom-react-ts
-
-You could try it online: [codesandbox](https://codesandbox.io/p/sandbox/github/artalar/reatom-react-ts/tree/main), [stackblitz](https://githubblitz.com/artalar/reatom-react-ts), [gitpod](https://gitpod.io/#https://github.com/artalar/reatom-react-ts)
-
-To setup it in your machine you can use [degit](https://github.com/Rich-Harris/degit) package.
+You can use [`degit`](https://github.com/rich-harris/degit) to quickly download it:
 
 ```sh
-npx degit github:artalar/reatom-react-ts PROJECT-NAME
-cd PROJECT-NAME
-
+npx degit github:artalar/reatom-react-ts new-reatom-app
+cd new-reatom-app
 npm install
 npm run dev
 ```
 
-## Add to existing project
-
-```sh
-npm i @reatom/core
-```
+## Add Reatom to an existing project
 
-### With React
-
-#### Installation
+Install [`@reatom/core`](https://www.reatom.dev/package/core/) if you are looking for a minimal and framework-agnostic state manager:
 
 ```sh
-npm i @reatom/npm-react
+npm install @reatom/core
 ```
 
-You need to set up the main context and put it into the provider at the top of your application.
-
-```jsx
-import { createCtx } from '@reatom/core'
-import { reatomContext } from '@reatom/npm-react'
-import { Main } from './path/to/an/Main'
-
-const ctx = createCtx()
-
-export const App = () => (
-  <reatomContext.Provider value={ctx}>
-    <Main />
-  </reatomContext.Provider>
-)
-```
+Or use [`@reatom/framework`](https://www.reatom.dev/package/framework/) which includes most of the Reatom ecosystem and is recommended for most applications.
 
-#### Usage
-
-The `useAtom` function allows you to have an experience similar to `useState`, but with shared atom state.
-
-```jsx
-const nameAtom = atom('Joe')
-const greetingAtom = atom((ctx) => `Hello, ${ctx.spy(nameAtom)}!`)
-
-const Greeting = () => {
-  const [name, setName] = useAtom(nameAtom)
-  const [greeting] = useAtom(greetingAtom)
-
-  return (
-    <>
-      <label>
-        What is your name?:
-        <input value={name} onChange={(e) => setName(e.currentTarget.value)} />
-      </label>
-      <h1>Hello {greeting}!</h1>
-    </>
-  )
-}
-```
-
-Also, you can create computed atoms (kind of selectors) right inside `useAtom`.
-
-```jsx
-const nameAtom = atom('Joe')
-
-const Greeting = () => {
-  const t = useTranslation()
-  const [name, setName] = useAtom(nameAtom)
-  const [greeting] = useAtom(
-    (ctx) => `${t('common:GREETING')} ${ctx.spy(nameAtom)}!`,
-    [t],
-  )
-
-  return (
-    <>
-      <label>
-        What is your name?:
-        <input value={name} onChange={(e) => setName(e.currentTarget.value)} />
-      </label>
-      <h1>{greeting}!</h1>
-    </>
-  )
-}
-```
+For a guide on integration with a supported view framework, see the relevant adapter's docs:
 
-This is very basic functionality of reatom-react bindings, see more in [@reatom/npm-react](/package/npm-react/) package documentation
+- [React](https://reatom.dev/package/npm-react)
+- [Svelte](https://reatom.dev/package/npm-svelte)
+- [SolidJS](https://reatom.dev/package/npm-solid-js)
 
-<!--
-### With Solid
+## ESLint
 
-### With Vue
--->
+If you are using ESLint, see [`@reatom/eslint-plugin`](https://www.reatom.dev/package/eslint-plugin/) for a set of Reatom-specific rules.
diff --git a/docs/src/content/docs/index.md b/docs/src/content/docs/index.md
diff --git a/examples/_lit/.gitignore b/examples/_lit/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/_lit/README.md b/examples/_lit/README.md
@@ -0,0 +1,5 @@
+# Reatom atomization example
+
+An example showing how to use the [atomization](https://www.reatom.dev/recipes/atomization/) pattern in Reatom.
+
+[Open in StackBlitz](https://stackblitz.com/github/artalar/reatom/tree/v3/examples/react-atomization)
diff --git a/examples/_lit/index.html b/examples/_lit/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>