Arweave supports building fully decentralized frontend applications using React, Svelte, or Vue.

Once deployed, your app lives permanently on the permaweb. No servers, no hosting fees, no renewals.

How It Works

A permaweb app is a static site (HTML, CSS, JS) uploaded to Arweave as a set of transactions linked together by a path manifest.

The manifest maps file paths to transaction IDs, so index.html, main.js, and style.css are each stored individually but served as a single coherent site through any Arweave gateway.

When a user visits https://arweave.net/<manifest-tx-id>, the gateway reads the manifest and serves the correct files, just like a traditional web server, but backed by permanent storage.

Prerequisites

You'll need a funded Arweave wallet to deploy. If you don't have one yet:

1. Generate a wallet: npx -y @permaweb/wallet > wallet.json
2. Add Turbo credits at turbo.ar.io, or transfer $AR from an exchange
3. See the Arweave Wallets & $AR guide for more detail on wallets and funding

React

Create Your Project

npm create vite@latest my-permaweb-app -- --template react
cd my-permaweb-app

Configure for Hash Routing

npm i react-router

React Router uses browser history by default, which won't work on the permaweb because there's no server to handle fallback routes. Switch to hash routing:

import { createHashRouter, RouterProvider } from "react-router";

const router = createHashRouter([
  {/* your routes */}
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Build for Production

npm run build

This creates a build/ directory with your optimized static files.

Deploy to Arweave

Use permaweb-deploy with the deploy command to open an interactive tool with deployment steps.

npx permaweb-deploy deploy

To set up custom scripts or GitHub Actions to automate deployment, check out the full guide here.

Svelte

Create Your Project

Get started by setting up a new SvelteKit project.

npx sv create my-permaweb-app
cd my-permaweb-app

Configure for Static Output

SvelteKit by default is built for applications with server-side rendering (SSR).

To create a Single Page Application (SPA) that can be served on the Permaweb, disable SSR for all pages by adding the following code to the src/routes/+layout.js file:

export const ssr = false;

Install the static adapater for SvelteKit:

npm i -D @sveltejs/adapter-static

Update your svelte.config.js file:

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      fallback: '200.html'
    }),
    paths: {
      relative: true
    }
  }
};

Build and Deploy

npm run build
npx permaweb-deploy deploy

Vue

Create Your Project

npm create vue@latest my-permaweb-app
cd my-permaweb-app
npm install

Configure for Hash Routing

In your router setup, use createWebHashHistory instead of createWebHistory:

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // your routes
  ]
});

Build and Deploy

npm run build
npx permaweb-deploy deploy

What Happens After Deploy

After a successful deployment, you'll receive:

• A transaction ID, the unique identifier for your manifest
• A gateway URL at https://arweave.net/<txId> where your app is live

Your app is now permanently stored. It can't be taken down, modified, or lost. Anyone with the transaction ID or gateway URL can access it forever.

Attaching a Human-Readable Name

Instead of sharing a 43-character transaction ID, you can attach an ArNS name (Arweave Name System) to your deployment:

npx permaweb-deploy --arns-name my-app

Your app is then accessible at myapp.ar.io, a permanent, human-readable address for your permaweb application.