+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [About The Project](#about-the-project)
+- [Getting Started](#getting-started)
+ - [Prerequisites](#prerequisites)
+ - [Installation and Running example](#installation-and-running-example)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [Want to hack on IPFS?](#want-to-hack-on-ipfs)
+
+## About The Project
+
+- Read the [docs](https://ipfs.github.io/helia/modules/helia.html)
+- Look into other [examples](https://github.com/ipfs-examples/helia-examples) to learn how to spawn a Helia node in Node.js and in the Browser
+- Visit https://dweb-primer.ipfs.io to learn about IPFS and the concepts that underpin it
+- Head over to https://proto.school to take interactive tutorials that cover core IPFS APIs
+- Check out https://docs.ipfs.io for tips, how-tos and more
+- See https://blog.ipfs.io for news and more
+- Need help? Please ask 'How do I?' questions on https://discuss.ipfs.io
+
+## Getting Started
+
+### Prerequisites
+
+Make sure you have installed all of the following prerequisites on your development machine:
+
+- Git - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed.
+- Node.js - [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager.
+
+### Installation and Running example
+
+```console
+> npm install
+> npm start
+or
+> npm run dev
+```
+To run the test
+
+```console
+npx playwright install
+npm run test
+```
+
+Now open your browser at `http://localhost:3000`
+
+## Usage
+
+In this example, you will find a boilerplate you can use to guide yourself into creating a react+vite app with helia, this provides a pattern to reuse the same client across components with the context API and suggests how to integrate it with custom hooks
+
+You should see the following:
+
+![](./public/hello-helia.gif)
+
+_For more examples, please refer to the [Documentation](#documentation)_
+
+## Documentation
+
+- [IPFS Primer](https://dweb-primer.ipfs.io/)
+- [IPFS Docs](https://docs.ipfs.io/)
+- [Tutorials](https://proto.school)
+- [More examples](https://github.com/ipfs-examples/helia-examples)
+- [API - Helia](https://ipfs.github.io/helia/modules/helia.html)
+- [API - @helia/unixfs](https://ipfs.github.io/helia-unixfs/modules/helia.html)
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the IPFS Project
+2. Create your Feature Branch (`git checkout -b feature/amazing-feature`)
+3. Commit your Changes (`git commit -a -m 'feat: add some amazing feature'`)
+4. Push to the Branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## Want to hack on IPFS?
+
+[![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md)
+
+The IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out:
+
+Read the [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md) and [JavaScript Contributing Guidelines](https://github.com/ipfs/community/blob/master/CONTRIBUTING_JS.md).
+
+- **Check out existing issues** The [issue list](https://github.com/ipfs/helia/issues) has many that are marked as ['help wanted'](https://github.com/ipfs/helia/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22) or ['difficulty:easy'](https://github.com/ipfs/helia/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Adifficulty%3Aeasy) which make great starting points for development, many of which can be tackled with no prior IPFS knowledge
+- **Look at the [Helia Roadmap](https://github.com/ipfs/helia/blob/main/ROADMAP.md)** This are the high priority items being worked on right now
+- **Perform code reviews** More eyes will help
+ a. speed the project along
+ b. ensure quality, and
+ c. reduce possible future bugs
+- **Add tests**. There can never be enough tests
+
+[cid]: https://docs.ipfs.tech/concepts/content-addressing "Content Identifier"
+[Uint8Array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
+[libp2p]: https://libp2p.io
diff --git a/examples/helia-vite-react/index.html b/examples/helia-vite-react/index.html
new file mode 100644
index 00000000..21dfebaa
--- /dev/null
+++ b/examples/helia-vite-react/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Helia + Vite + React
+
+
+
+
+
+
diff --git a/examples/helia-vite-react/package.json b/examples/helia-vite-react/package.json
new file mode 100644
index 00000000..b27ee521
--- /dev/null
+++ b/examples/helia-vite-react/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "helia-vite",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "clean": "rimraf ./dist",
+ "dev": "vite",
+ "start": "vite",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test": "npm run build && playwright test tests"
+ },
+ "dependencies": {
+ "@chainsafe/libp2p-noise": "^11.0.1",
+ "@chainsafe/libp2p-yamux": "^3.0.7",
+ "@helia/unixfs": "^1.2.0",
+ "@libp2p/bootstrap": "^6.0.2",
+ "@libp2p/websockets": "^5.0.6",
+ "blockstore-core": "^4.0.1",
+ "datastore-core": "^9.0.3",
+ "helia": "next",
+ "libp2p": "^0.42.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "rimraf": "^4.4.0"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.31.2",
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.0.11",
+ "@vitejs/plugin-react": "^3.1.0",
+ "test-util-ipfs-example": "^1.0.2",
+ "vite": "^4.2.0"
+ }
+}
diff --git a/examples/helia-vite-react/public/hello-helia.gif b/examples/helia-vite-react/public/hello-helia.gif
new file mode 100644
index 00000000..68e63af1
Binary files /dev/null and b/examples/helia-vite-react/public/hello-helia.gif differ
diff --git a/examples/helia-vite-react/public/vite.svg b/examples/helia-vite-react/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/examples/helia-vite-react/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/helia-vite-react/src/App.css b/examples/helia-vite-react/src/App.css
new file mode 100644
index 00000000..b9d355df
--- /dev/null
+++ b/examples/helia-vite-react/src/App.css
@@ -0,0 +1,42 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/examples/helia-vite-react/src/App.jsx b/examples/helia-vite-react/src/App.jsx
new file mode 100644
index 00000000..82df53bd
--- /dev/null
+++ b/examples/helia-vite-react/src/App.jsx
@@ -0,0 +1,55 @@
+import { useState, useContext } from 'react'
+import './App.css'
+import { useHelia } from '@/hooks/useHelia'
+import { useCommitText } from '@/hooks/useCommitText'
+
+function App() {
+ const [text, setText] = useState("")
+ const { error, starting } = useHelia()
+ const {
+ cidString,
+ commitText,
+ fetchCommitedText,
+ commitedText,
+ } = useCommitText()
+
+ return (
+