BlockRoll Kit - Developer Documentation
Three SDKs, One Powerful API
Integrate blockchain-based secure file storage into any application with our comprehensive SDKs
API Key-Based Authentication - Your wallet is automatically tied to your API key, no need to pass wallet addresses
Real-time Updates - Built-in WebSocket support for instant notifications and file updates
Type-Safe - Full TypeScript support with autocomplete and type definitions
Production Ready - Battle-tested code with error handling and best practices
Choose Your SDK
React SDK
@blockroll/react-sdk
Perfect for React and Next.js applications. Includes powerful hooks and context providers for seamless integration.
Features:
- React hooks (useBlockRoll, useMyFiles, etc.)
- TypeScript support with full type definitions
- SSR support for Next.js applications
- Automatic state management
- Real-time WebSocket updates
Installation:
npm install @blockroll/react-sdkQuick Start Example:
import { BlockRollProvider, useBlockRoll } from '@blockroll/react-sdk';
function App() {
return (
<BlockRollProvider apiKey={process.env.NEXT_PUBLIC_BLOCKROLL_API_KEY}>
<YourApp />
</BlockRollProvider>
);
}
function UploadButton() {
const { uploadFile, loading } = useBlockRoll();
const handleUpload = async (file: File) => {
const result = await uploadFile({
file,
accessType: 'private',
encryption: true,
});
console.log('Uploaded:', result.fileId);
};
return (
<button onClick={() => handleUpload(file)} disabled={loading}>
{loading ? 'Uploading...' : 'Upload File'}
</button>
);
}Vue SDK
@blockroll/vue-sdk
Built for Vue.js and Nuxt applications with Composition API. Reactive state management and seamless Vue integration.
Features:
- Vue composables with Composition API
- TypeScript support included
- SSR support for Nuxt applications
- Reactive state with Vue's reactivity system
- Real-time updates with WebSocket
Installation:
npm install @blockroll/vue-sdkQuick Start Example:
<script setup>
import { useBlockRoll } from '@blockroll/vue-sdk';
const { uploadFile, loading } = useBlockRoll();
const handleUpload = async (file) => {
const result = await uploadFile({
file,
accessType: 'private',
encryption: true,
});
console.log('Uploaded:', result.fileId);
};
</script>
<template>
<button @click="handleUpload(file)" :disabled="loading">
{{ loading ? 'Uploading...' : 'Upload File' }}
</button>
</template>CDN Bundle
Vanilla JavaScript
No build step required! Perfect for any HTML page, WordPress, PHP, or vanilla JavaScript projects.
Features:
- Works anywhere - HTML, WordPress, PHP
- No build tools or bundlers needed
- Global BlockRoll class available
- TypeScript definitions included
- Real-time WebSocket support
Installation:
<script src="https://cdn.jsdelivr.net/npm/@blockroll/cdn@latest/dist/blockroll.min.js"></script>Quick Start Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@blockroll/cdn@latest/dist/blockroll.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" />
<button onclick="upload()">Upload</button>
<script>
const blockroll = new BlockRoll({
apiKey: 'YOUR_API_KEY',
realtime: true,
});
async function upload() {
const file = document.getElementById('fileInput').files[0];
const result = await blockroll.files.upload({
file,
accessType: 'private',
encryption: true,
});
console.log('Uploaded:', result.fileId);
}
</script>
</body>
</html>Complete API Coverage
Upload File
Upload files with client-side encryption
Download File
Download and decrypt files securely
Share File
Share files by wallet address with permissions
List Files
Get all files with pagination and filters
Workspaces
Create and manage team workspaces
Notifications
Real-time notifications via WebSocket
Revoke Access
Revoke file access from any wallet
Delete File
Permanently delete files from storage
Get Started in 3 Steps
Documentation & Resources
Ready to Build?
Join developers building secure, decentralized applications with BlockRoll Kit. Get your API key and start integrating today.
