Oura Node Editor
Library to build custom node-based editors. Powered by react and typescript.
Overview:
The oura-node-editor is a react component library that allows users to create node-based editors. It is inspired by the node editor in Blender, but it is important to note that the project is currently in an experimental state and the API may change significantly. The npm repository for the library is not up to date, so it is recommended to pull the library and link it to your project if you wish to test it.
Features:
- Node Creation: Easily create nodes with a name, x/y position, width, selected state, and zero or many connectors.
- Connectors: A connector consists of pin layout (no-pins, left, right, left and right) and connector-content. Library provides generic connector-content options such as none, string, number, button, select, and check-box.
- Node Linking: Nodes can be linked to each other using links.
- Custom Connector-Content: Users can create their own connector-content, similar to the canvas in the oura-canvas-creator example project.
- Node Movement and Resizing: Nodes can be moved and their width can be resized.
- Zoom and Drag: The working sheet where nodes are displayed can be zoomed in and out and dragged.
- Selection: One or many nodes and links can be selected.
- Theme Customization: It is possible to extend the existing theme or create your own.
- Virtualized Node Rendering: Node rendering is virtualized, which means that nodes are not rendered if they are not displayed on the screen. This improves general performance.
Summary:
The oura-node-editor is a react component library that enables users to create node-based editors. It offers various features such as node creation, connector options, node linking, customization options, and performance optimization through virtualized node rendering. However, it should be noted that the project is still experimental and the API may undergo significant changes.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- daisyUI
daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- UI Kits & Components
A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.