From e606ea16ef5e25ed268859b687a928127747c17c Mon Sep 17 00:00:00 2001
From: Henry Chen <1474479+chenhunghan@users.noreply.github.com>
Date: Fri, 12 Jan 2024 19:49:01 +0200
Subject: [PATCH] Update README.md

---
 README.md | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 80 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 914ee8e..db8e404 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,81 @@
 # vite-plugin-trunk
-Seamless embedding WASM components (Leptos) in a Vite project via Trunk.
+
+A zero-config vite plugin for seamless integrating WASM components in a React/Vue project.
+
+```ts
+import { vitePluginTrunk } from "vite-plugin-trunk"
+export default defineConfig({
+  plugins: [vitePluginTrunk()],
+})
+```
+
+## Get started
+
+### React + [Leptos](https://leptos.dev/)
+
+Start a new React project
+```sh
+npm create vite@latest my-react-app -- --template react-ts
+cd my-react-app
+npm install --save-dev vite-plugin-trunk
+```
+
+Import `vitePluginTrunk` plugin in `vite.config.ts`.
+```ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { vitePluginTrunk } from "vite-plugin-trunk"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), vitePluginTrunk()],
+})
+```
+
+#### Create a Rust project
+
+Create `Cargo.toml` (package.json, but for Rust) at the project root with [Leptos](https://leptos.dev/).
+```toml
+[package]
+name = "hello-leptos"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.5.4", features = ["csr", "nightly"] }
+```
+
+Create `main.rs` in `./src` with a basic [Leptos](https://leptos.dev/) 
+```rust
+use leptos::*;
+
+fn main() {
+  leptos::mount_to_body(|| view! { <span>"Hello Leptos"</span> })
+}
+```
+
+#### Set up Rust toolchain
+
+Install Rust's nightly toolchain (because we are using Leptos with `nightly` feature.
+```sh
+rustup toolchain install nightly
+rustup override set nightly # set toolchain to nightly for this project 
+```
+
+Install [Trunk](https://trunkrs.dev/)
+```sh
+cargo binstall trunk
+```
+
+#### Start Development
+
+```
+npm run dev
+```
+
+You should see both Vite + React logos, and "Hello Leptos" on the screen.
+
+Production build
+```
+npm run build
+```