A JavaScript library for reading CLIP STUDIO PAINT .clip files in both browsers and Node.js environments.
- β Cross-platform: Works in both browsers and Node.js
- β TypeScript: Full TypeScript support with type definitions
- β ESM: Modern ES Module format
- β Extract thumbnails: Get preview images from CLIP files
- β Read layer information: Access layer metadata (name, opacity, visibility, etc.)
npm install clipstudio # or pnpm add clipstudio # or yarn add clipstudio
import { ClipStudio } from 'clipstudio' // Handle file input const handleFileSelect = async (event: Event) => { const input = event.target as HTMLInputElement const file = input.files?.[0] if (file) { const clipStudio = await ClipStudio.load(file) // Get thumbnail as Blob const thumbnail = clipStudio.getThumbnail() // Blob const imageUrl = URL.createObjectURL(thumbnail) // Get layer information const layers = clipStudio.getLayers() console.log(`Found ${layers.length} layers`) } }
import { ClipStudio } from 'clipstudio' import { promises as fs } from 'node:fs' async function processClipFile() { // Read CLIP file const fileBuffer = await fs.readFile('./artwork.clip') const clipStudio = await ClipStudio.load(fileBuffer) // Get thumbnail as Buffer const thumbnail = clipStudio.getThumbnail() // Buffer await fs.writeFile('./thumbnail.png', thumbnail) // Analyze layers const layers = clipStudio.getLayers() layers.forEach((layer, index) => { console.log(`Layer ${index + 1}: ${layer.name}`) console.log(` Opacity: ${Math.round(layer.opacity * 100)}%`) console.log(` Visible: ${layer.isVisible}`) console.log(` Folder: ${layer.isFolder}`) }) } processClipFile()
Loads a CLIP STUDIO file and returns a ClipStudio instance.
Parameters:
file- CLIP file asFileobject (browser) orBuffer(Node.js)
Returns: Promise that resolves to a ClipStudio instance
Example:
const clipStudio = await ClipStudio.load(file)
Extracts the thumbnail image from the CLIP file.
Returns:
Blobin browser environmentsBufferin Node.js environments
Throws: Error if no thumbnail is found
Example:
const thumbnail = clipStudio.getThumbnail() // Browser: Use as image source const imageUrl = URL.createObjectURL(thumbnail) // Node.js: Save to file await fs.writeFile('thumbnail.png', thumbnail)
Retrieves all layer information from the CLIP file.
Returns: Array of Layer objects
Example:
const layers = clipStudio.getLayers() console.log(`Total layers: ${layers.length}`)
Layer information extracted from CLIP files.
interface Layer { /** Unique layer identifier */ id: string /** Layer index in the hierarchy */ index: number /** Layer display name */ name: string /** Layer opacity (0.0 to 1.0) */ opacity: number /** Whether the layer is visible */ isVisible: boolean /** Whether this is a folder layer */ isFolder: boolean }
Example layer data:
{ id: "5f8f2d2381-7a44-f2a9-dfa6-51417dd5ad", index: 1, name: "Background", opacity: 0.8, isVisible: true, isFolder: false }
The library throws descriptive errors for common issues:
try { const clipStudio = await ClipStudio.load(file) const thumbnail = clipStudio.getThumbnail() } catch (error) { if (error.message.includes('SQLite data not found')) { console.error('Invalid CLIP file format') } else if (error.message.includes('No thumbnail found')) { console.error('CLIP file has no thumbnail') } else { console.error('Failed to process CLIP file:', error.message) } }
- Chrome 61+
- Firefox 60+
- Safari 12+
- Edge 79+
Note: Requires support for ES2020 features and WebAssembly.
- Node.js 20.19.3+
# Install dependencies pnpm install # Build library pnpm run build # Run core tests (unit + examples) pnpm test # Run unit tests only pnpm run test:unit # Run examples tests pnpm run test:examples # Run browser tests pnpm run test:playwright # Start development server pnpm run serve # Code quality pnpm run check # Run all checks pnpm run lint # Lint code pnpm run format # Format code
The library includes a built-in development server for testing browser examples:
# Start server with automatic port selection pnpm run serve # Server will automatically find an available port # Access examples at: http://localhost:[auto-port]/examples/
The server automatically:
- Finds available ports (tries 8080, 3000, 5000, 9000, etc.)
- Enables CORS for cross-origin requests
- Serves static files with proper MIME types
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT
- Built with sql.js for SQLite parsing
- Inspired by the CLIP STUDIO PAINT file format