Getting Started with Legit SDK
This guide will help you create your first Legit-backed project and understand the basics of versioned file operations.
Environment Compatibility
Legit SDK works in many environments:
- Operating Systems: macOS, Linux, Windows
- Languages: Node.js, Python, Java (more coming)
- Containers / Sandboxed Environments: Docker, serverless, cloud VMs
It works everywhere because it operates on a filesystem abstraction. Any environment that supports standard filesystem operations can run it. In this getting started you can choose between React or Node.js.
React
You can install a react app with the following command:
npx create-next-app@latest my-app
1. Install the SDK for React
npm i @legit-sdk/core @legit-sdk/react memfs@legit-sdk/core– versioning engine@legit-sdk/react– React integration layermemfs– in-memory filesystem
For now we will use the in-memory filesystem
memfsto store the data. We will add more storage adapters later (FSA, OPFS, …)
2. Add the LegitProvider to your app
The provider sets up the Legit environment for all nested components.
If you’re using Next.js, make sure this is a client component (add “use client” at the top). If your parent layout is server-side, you can wrap the provider in a custom ClientProvider component.
// src/App.tsx or app/providers/LegitProviderWrapper.tsx
'use client';
import React from 'react';
import { LegitProvider } from '@legit-sdk/react';
import Editor from './Editor';
export default function App() {
return
<LegitProvider>
<Page />
</LegitProvider>
}3. Use the useLegitFile hook
The hook gives you access to:
- content → current text of a file
- setContent(value) → commit new changes
- history → array of past commits
- getVersion(id) → load past states
⚠️ The hook must be used inside a component wrapped by LegitProvider.
// src/Editor.tsx
'use client';
import React, { useState, useEffect } from 'react';
import { useLegitFile } from '@legit-sdk/react';
const FILE_PATH = '/notes.txt';
const INITIAL_TEXT = 'Hello from Legit đź‘‹';
export default function Editor() {
const { content, setContent, history, getVersion, loading, error } = useLegitFile(FILE_PATH, { initialContent: INITIAL_TEXT });
const [text, setText] = useState(undefined);
// Initialize with text from LegitFs
useEffect(() => {
if (loading && !text) {
setText(content);
}
}, [loading, content, text, loading]);
if (loading) return <div>Loading Legit...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div style={{ padding: 20 }}>
<h2>đź“ť Legit Editor</h2>
<input
value={text}
onChange={(e) => setText(e.target.value)}
onBlur={() => setContent(text)}
/>
<pre>{JSON.stringify(history, null, 2)}</pre>
</div>
);
}Next steps:
- Legit SDK Examples — Explore Legit SDK Starters and Examples
- Filesystem API Reference — See all available paths in the file system