A modern, interactive database schema visualization tool built with Next.js, React Flow, and Drizzle ORM. Schema0 allows you to upload your PostgreSQL databases and visualize their structure with an intuitive, interactive interface.
- Interactive Schema Visualization: View your database tables and relationships in an intuitive flow diagram
- Real-time Database Connection: Connect to your PostgreSQL databases using connection strings
- Multi-Schema Support: Navigate between different schemas in your database
- Responsive Design: Works seamlessly on desktop and mobile devices
- Full-Screen Mode: Immersive viewing experience for complex schemas
- Mini Map Navigation: Easy navigation through large schema diagrams
- Modern UI: Built with Radix UI components and Tailwind CSS
- Authentication: Secure user authentication with Better Auth
- Database Management: Upload, manage, and rename your databases
- Node.js 18+
- PostgreSQL database
- Git
-
Clone the repository
git clone https://github.com/yourusername/schema0.git cd schema0 -
Install dependencies
bun install
-
Set up environment variables Create a
.env.localfile in the root directory based on.env.example -
Run database migrations
npx drizzle-kit migrate
-
Start the development server
bun run dev
-
Open your browser Navigate to http://localhost:3000
- Frontend: Next.js 15, React 19, TypeScript
- UI Components: Radix UI, Tailwind CSS, Lucide React
- Database: PostgreSQL with Drizzle ORM
- Schema Visualization: React Flow (@xyflow/react)
- Authentication: Better Auth
- State Management: TanStack Query
- Styling: Tailwind CSS with Motion animations
- Code Quality: Biome for linting and formatting
- Click the "+" button in the top navigation
- Enter your PostgreSQL connection string
- Your database schema will be automatically analyzed and visualized
postgresql://username:password@hostname:port/database_name
Example:
postgresql://alex:[email protected]/dbname
- Zoom: Use mouse wheel or pinch gestures
- Pan: Click and drag to move around
- Full Screen: Click the full-screen button for immersive viewing
- Mini Map: Use the mini map for quick navigation
- Schema Selection: Switch between different schemas using the dropdown
schema0/
├── src/
│ ├── app/ # Next.js app router
│ ├── components/ # React components
│ │ ├── schema-visualizer/ # Schema visualization logic
│ │ └── ui/ # Reusable UI components
│ ├── lib/ # Utility functions and configurations
│ │ └── db/ # Database utilities and types
│ ├── actions/ # Server actions
│ └── hooks/ # Custom React hooks
├── drizzle/ # Database migrations
└── public/ # Static assets
bun run dev- Start development server with Turbopackbun run build- Build for productionbun run start- Start production serverbun run lint- Run ESLintbun run biome:check- Run Biome for code formattingbun run db:generate- Generate database migrationsbun run db:migrate- Run database migrations
The application uses Drizzle ORM with the following main schemas:
- auth: User authentication and session management
- database: Database connection management and metadata
- Fork the repository
- Create a 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
This project is licensed under the MIT License - see the LICENSE file for details.
- React Flow for the interactive flow diagrams
- Drizzle ORM for database management
- Better Auth for authentication
- Radix UI for accessible UI components
If you have any questions or need help, please open an issue on GitHub or reach out to the maintainers.
Built with ❤️ using Next.js and React Flow