Svelvet
๐ A Svelte library for building dynamic, infinitely customizable node-based user interfaces and flowcharts
File Explorer
Download Latest Version (.zip)- pre-commit
- anchor.mdx
- background.mdx
- contrasttheme.mdx
- controls.mdx
- drawer.mdx
- edge.mdx
- group.mdx
- minimap.mdx
- node.mdx
- resizer.mdx
- svelvet.mdx
- themetoggle.mdx
- colorpicker.mdx
- knob.mdx
- overview.mdx
- radiogroup.mdx
- slider.mdx
- toggle.mdx
- database.mdx
- flowchart.mdx
- shapes.mdx
- installation.mdx
- interaction.mdx
- dark.png
- light.png
- changelog.mdx
- favicon.png
- introduction.mdx
- mint.json
- package-lock.json
- README.md
- roadmap.mdx
- styling.mdx
- upgrading.mdx
- Carbon.svelte
- Table.svelte
- CircleColor.svelte
- ColorAnchor.svelte
- CustomAnchor.svelte
- CustomEdge.svelte
- DashCount.svelte
- NodeWrapper.svelte
- Noise.svelte
- Output.svelte
- Scale.svelte
- Thickness.svelte
- Visualizer.svelte
- Audio.svelte
- Bass.svelte
- CircleColor.svelte
- ColorAnchor.svelte
- CustomAnchor.svelte
- DashCount.svelte
- KnobOutputDisplayer.svelte
- NodeWrapper.svelte
- Noise.svelte
- Output.svelte
- Scale.svelte
- Thickness.svelte
- Treble.svelte
- Visualizer.svelte
- Volume.svelte
- Connector.svelte
- CustomAnchor.svelte
- CustomControls.svelte
- CustomEdge.svelte
- CustomEdge.svelte.d.ts
- CustomNode.svelte
- CustomNode.svelte.d.ts
- FitContent.svelte
- InputNode.svelte
- InputNode.svelte.d.ts
- Percent.svelte
- PxValue.svelte
- arrow_left.svelte
- arrow_right.svelte
- dark_mode.svelte
- filter_center_focus.svelte
- Icon.svelte
- light_mode.svelte
- lock.svelte
- lock_open.svelte
- north_west.svelte
- south_east.svelte
- visibility_off.svelte
- zoom_in.svelte
- zoom_out.svelte
- Anchor.svelte
- DefaultAnchor.svelte
- ContrastTheme.svelte
- Controls.svelte
- ColorWheel.svelte
- Knob.svelte
- RadioGroup.svelte
- Slider.svelte
- TextField.svelte
- Toggle.svelte
- Drawer.svelte
- DrawerAnchor.svelte
- DrawerController.svelte
- DrawerEdge.svelte
- DrawerNode.svelte
- Edge.svelte
- EdgeContext.svelte
- Editor.svelte
- FlowChart.svelte
- Group.svelte
- GroupBoundingBox.svelte
- MiniGroupBox.svelte
- Minimap.svelte
- MiniNode.svelte
- DefaultNode.svelte
- InternalNode.svelte
- Node.svelte
- Resizer.svelte
- SelectionBox.svelte
- ThemeToggle.svelte
- defaults.ts
- graph.ts
- index.ts
- math.ts
- styles.ts
- Background.svelte
- Graph.svelte
- Svelvet.svelte
- ZoomPanWrapper.svelte
- GraphRenderer.svelte
- GroupBoxRenderer.svelte
- CursorStore.ts
- GraphStore.ts
- index.ts
- anchorProps.ts
- edgeProps.ts
- nodeProps.ts
- svelvetProps.ts
- anchor.ts
- context.ts
- data.ts
- edge.ts
- events.ts
- general.ts
- graph.ts
- index.ts
- key.ts
- node.ts
- parser.ts
- store.ts
- populateStore.ts
- calculateFitContent.ts
- calculateFitView.ts
- calculatePath.ts
- calculateRadius.ts
- calculateRelativeCursor.ts
- calculateStepPath.ts
- calculateTranslation.ts
- calculateViewPortCenter.ts
- calculateZoom.ts
- index.ts
- updateTranslation.ts
- createAnchor.ts
- createBoundsStore.ts
- createDerivedCursoreStore.ts
- createEdge.ts
- createEdgeStore.ts
- createGraph.ts
- createNode.ts
- createStore.ts
- generateInput.ts
- generateOutput.ts
- index.ts
- flowchartDrawer.ts
- getViewportCenter.ts
- addProps.ts
- buildArcStringKey.ts
- buildPath.ts
- clickOutside.ts
- constructArcString.ts
- debounce.ts
- generateKey.ts
- getRandomColor.ts
- getTouchDistance.ts
- getTouchMidpoint.ts
- index.ts
- parser.ts
- rotateVector.ts
- roundNum.ts
- sortKey.ts
- throttle.ts
- writables.ts
- index.ts
- moveNodes.ts
- zoomAndTranslate.ts
- reloadStore.ts
- saveStore.ts
- index.ts
- snapGrid.ts
- index.js
- +page.svelte
- ArrowEdge.svelte
- ArrowEdgeBlue.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte
- +page.svelte.d.ts
- app.d.ts
- app.html
- index.test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- test.ts
- addProps.test.ts
- buildArcStringKey.test.ts
- buildPath.test.ts
- Graphstore.README.md
- saveStore and reloadStore.md
- Snapgrid and Padlock.md
- Version 11.md
- .eslintignore
- .eslintrc.cjs
- .gitignore
- .npmignore
- .npmrc
- .prettierignore
- .prettierrc
- package-lock.json
- package.json
- playwright.config.ts
- README.md
- svelte.config.js
- svelvet-10.0.2.tgz
- tsconfig.json
- vite.config.ts
# Installation Guide
1. Get the code
git clone https://github.com/open-source-labs/Svelvet
Downloads the entire project code from GitHub to your computer.
cd Svelvet
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
npm install svelvet
Downloads and installs the libraries listed in package.json.
yarn add svelvet
Type this command into your terminal and run it.
npm run test:unit [filename]
Type this command into your terminal and run it.
<li>Added NPM Package folder in root directory of GitHub repo</li>
Type this command into your terminal and run it.
<li>this folder is used for adding changes to library & pushing updates to NPM; included here to have version control through GitHub</li>
Type this command into your terminal and run it.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
Pulled directly from this repo's README.
// repository documentation
Was this content helpful?
(0 ratings)
