https://github.com/gacktto/graphyr
Graphyr is a powerful online editor that gives you full creative control to design beautiful and interactive data dashboards from scratch, without code. It is inspired by modern no-code/low-code web editors, aiming to be a flexible open-source alternative.
https://github.com/gacktto/graphyr
dashboards figma framer javascript low-code low-code-web-app-builder no-code powerbi react reactjs typescript web-editor webeditor webflow
Last synced: 16 days ago
JSON representation
Graphyr is a powerful online editor that gives you full creative control to design beautiful and interactive data dashboards from scratch, without code. It is inspired by modern no-code/low-code web editors, aiming to be a flexible open-source alternative.
- Host: GitHub
- URL: https://github.com/gacktto/graphyr
- Owner: Gacktto
- License: gpl-3.0
- Created: 2025-06-26T17:53:52.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-07-11T18:14:29.000Z (10 months ago)
- Last Synced: 2025-07-11T19:20:41.674Z (10 months ago)
- Topics: dashboards, figma, framer, javascript, low-code, low-code-web-app-builder, no-code, powerbi, react, reactjs, typescript, web-editor, webeditor, webflow
- Language: TypeScript
- Homepage:
- Size: 155 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Graphyr
A no-code web platform for building fully customized data dashboards.
## Overview
**Graphyr** is a powerful online editor that gives you full creative control to design beautiful and interactive data dashboards from scratch, without code. It is inspired by modern no-code/low-code web editors, aiming to be a flexible open-source alternative.
## Summary
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Run Locally](#run-locally)
- [Roadmap](#roadmap)
- [License](#license)
## Features
- **Dynamic Canvas:** A flexible space to bring your pages and dashboards to life.
- **Frame:** A space to create your designs that will be published.
- **Floating Action Bar:** Quickly select creation modes and tools from an intuitive, accessible toolbar.
- **CSS-Based Properties Panel:** Edit element properties like colors, dimensions, and spacing using familiar CSS-based controls.
- **Element Tree View:** Easily view, select, and organize your elements in a hierarchical layer panel.
- **Smart Guides & Snapping:** Precisely align elements with smart guides and automatic snapping for a pixel-perfect layout.
- **Intuitive Element Resizing:** Resize any element by simply dragging its handles.
- **Essential Keyboard Shortcuts:**
| Action | Shortcut |
| :--- | :--- |
| Copy / Paste | `Ctrl + C` / `Ctrl + V` |
| Delete | `Delete` |
| Undo / Redo | `Ctrl + Z` / `Ctrl + Shift + Z` |
| Zoom In / Out | `Ctrl + Mouse Wheel` |
| Move Canvas | `Space + Drag` |
## Tech Stack
- **Frontend:** [React](https://reactjs.org/) with [TypeScript](https://www.typescriptlang.org/)
- **State Management:** [React Context](https://react.dev/reference/react/createContext)
- **Canvas Rendering:** [React](https://reactjs.org/)
- **Build Tool:** [Vite](https://vitejs.dev/)
- **Backend:** `(Not yet implemented)`
- **Real-time Communication:** `(Not yet implemented)`
## Run Locally
### Requirements
- [Node.js](https://nodejs.org/) (`v18.x` or higher)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
### Installation
1. **Clone the repository:**
```sh
git clone https://github.com/Gacktto/graphyr.git
```
2. **Navigate to the project directory:**
```sh
cd Graphyr
```
3. **Install dependencies:**
```sh
npm install
# or
yarn install
```
4. **Start the development server:**
```sh
npm run dev
# or
yarn dev
```
5. **Open your browser** and navigate to the local address provided by Vite.
## Roadmap
Next features that will be in the project:
- [ ] Data Integration (Import/Export CSV, JSON)
- [ ] Customizable Grid & Layout Aids
- [ ] Reusable Components
- [ ] Advanced Text Transformation Options
- [ ] Real-time Collaboration (via WebSockets)
- [ ] User Authentication & Cloud Project Storage
## License
This project is distributed under the **GNU General Public License v3.0 (GPL-3.0)**.
See the `LICENSE` file in the project root for the full text and further details.