@fileverse-dev/dsheet

Fileverse DSheet

dsheets.new is your decentralised alternative to google sheets & excel. Use it to read, manipulate, and even write onchain data, in real-time. Built on the same middleware as ddocs.new, the app is privacy-first, self-sovereign, and gives you full control over your data <3

👩‍🏭 Features:

• End-to-end encryption
• Local & peer-to-peer storage
• Query live data from APIs & smart contracts
• Write onchain: simulate + submit transactions (V0.3)
• Use a familiar spreadsheets interface & functions (VLOOKUP, INDEX, MATCH…)
• Granular access permissions (email, wallet, ENS)

Try Live Demo →

Installation

Install via npm to get started:

npm install @fileverse-dev/dsheet

Setup

1. Import

Add the following imports

import DsheetEditor from '@fileverse-dev/dsheet';
import '@fileverse-dev/dsheet/styles';

2. Configure Tailwind

Add to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@fileverse-dev/dsheet/dist/index.es.js"
  ]
}

3. Basic Usage

function App() {
  const [data, setData] = useState({});

  return (
    <DsheetEditor
      isAuthorized={true}
      dsheetId="my-sheet-id"
      onChange={(updateData) => setData(updateData)}
    />
  );
}

Props Reference

Required Props

Prop	Type	Description
isAuthorized	boolean	Authorization status for the user
dsheetId	string	Unique identifier for collaboration room

Optional Props

Prop	Type	Default	Description
onChange	(data: SheetUpdateData, encodedUpdate?: string) => void	-	Callback when sheet data changes
portalContent	string	-	Encoded initial sheet data
isReadOnly	boolean	false	Enable read-only mode
allowComments	boolean	false	Enable comments (requires isReadOnly=true)
username	string	-	Username for collaboration
isCollaborative	boolean	false	Enable collaborative features
enableWebrtc	boolean	true	Enable WebRTC for P2P collaboration
enableIndexeddbSync	boolean	true	Enable local IndexedDB persistence
isTemplateOpen	boolean	-	Template sidebar state
selectedTemplate	string	-	Selected template identifier
onboardingComplete	boolean	-	Onboarding completion status
sheetEditorRef	RefObject<WorkbookInstance>	-	External ref to editor instance

Advanced Props

Prop	Type	Description
renderNavbar	(editorValues?: EditorValues) => JSX.Element	Custom navbar renderer
onboardingHandler	OnboardingHandlerType	Custom onboarding logic
dataBlockApiKeyHandler	DataBlockApiKeyHandlerType	API key handler for data blocks
getCommentCellUI	(row: number, column: number) => void	Custom comment UI handler
commentData	Object	Comment data for cells
toggleTemplateSidebar	() => void	Template sidebar toggle handler
storeApiKey	(apiKeyName: string) => void	API key storage handler
onDataBlockApiResponse	(dataBlockName: string) => void	Data block API response handler
onDuneChartEmbed	() => void	Dune chart embed handler
onSheetCountChange	(sheetCount: number) => void	Sheet count change handler

UI State Props

Prop	Type	Description
setShowFetchURLModal	Dispatch<SetStateAction<boolean>>	URL fetch modal state setter
setFetchingURLData	(fetching: boolean) => void	URL fetching state setter
setInputFetchURLDataBlock	Dispatch<SetStateAction<string>>	URL input state setter
setForceSheetRender	Dispatch<SetStateAction<number>>	Force re-render trigger

Examples

Read-Only Viewer

<DsheetEditor
  isAuthorized={true}
  dsheetId="viewer-sheet"
  isReadOnly={true}
  allowComments={true}
  portalContent={encodedData}
  onChange={() => {}}
/>

Collaborative Editor

<DsheetEditor
  isAuthorized={true}
  dsheetId="collab-sheet"
  username="john-doe"
  isCollaborative={true}
  enableWebrtc={true}
  onChange={(data) => console.log('Sheet updated:', data)}
/>

Custom Navbar

<DsheetEditor
  isAuthorized={true}
  dsheetId="custom-sheet"
  renderNavbar={(editorValues) => (
    <div className="flex items-center gap-4">
      <h1>My Custom Sheet</h1>
      <button onClick={() => editorValues?.sheetEditorRef.current?.exportToExcel()}>
        Export
      </button>
    </div>
  )}
/>

With Templates

<DsheetEditor
  isAuthorized={true}
  dsheetId="template-sheet"
  selectedTemplate="financial-budget"
  isTemplateOpen={true}
  toggleTemplateSidebar={() => setTemplateOpen(!templateOpen)}
/>

Development

Run Demo

cd demo
npm install
npm run dev

Build Package

npm run build

TypeScript

All props are fully typed. Import types:

import { DsheetProps, SheetUpdateData, EditorValues } from '@fileverse-dev/dsheet/types';

License

MIT