npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@devhelpr/flowrunner-canvas

v0.43.61

Published

Flow based programming ('nodes + wires') and UI designer which can run standalone or export flows in json format for external use

Downloads

32

Readme

DON'T USE except for experiments! Still in active development

This package is part of a monorepo

What is Flowrunner-canvas?

Flowrunner-canvas is a flow based programming environment that can be used standalone but also very easily be added to an existent frontend javascript/typescript toolchain. When used standalone it can be used without writing code, but it is extendable in various ways depending on your needs.

Flowrunner-canvas is a visual editor for creating flows that can be run with the @devhelpr/flowrunner npm package. It runs within your dev environment in the browser, locally on a dev machine,

Flowrunner-canvas can use Nodejs express to add some basic http services to read and store the flows on the location where you specify it to be stored. But this is not a requirement, it can also use a custom storage provider, and a localstorage provider is provided.

The basic flowrunner-canvas just uses the standard flowrunner taskplugins, but you can add plugins depending on your needs.

Codesandbox updated

old Codesandbox

old Codesandbox wasm-tixy

Ways to use flowrunner-canvas

  • as a playground to prototype applications
  • together with the layout editor, build an application with it
  • as a flow editor for other applications like a backend app with its own flowrunner

The simplest way to start playing with flowrunner-canvas

  • clone this github repo
  • this is a monorepo, run from root of this repo:
  • yarn install
  • yarn start

Node versions

  • I have succesfully ran my project on node 12.x node 14.x + on both Mac and Windows (wsl)

Using create-react-app

  • npx create-react-app flow-app --template typescript
  • cd flow-app
  • yarn add @devhelpr/flowrunner-canvas@latest
  • replace the code in src/App.tsx with:
import {
  FlowrunnerCanvas,
  flowrunnerLocalStorageProvider
} from "@devhelpr/flowrunner-canvas";

import "@devhelpr/flowrunner-canvas/assets/fira_code.css";
import "@devhelpr/flowrunner-canvas/assets/bootstrap.min.css";
import "@devhelpr/flowrunner-canvas/assets/react-draft-wysiwyg.css";
import "@devhelpr/flowrunner-canvas/assets/main.css";

export default () => {
  return (
    <FlowrunnerCanvas
      flowStorageProvider={flowrunnerLocalStorageProvider}
    ></FlowrunnerCanvas>
  );
}
  • yarn start

This starts a flowrunner-canvas editor which stores its flow locally in the localStorage

How to use Flowrunner-canvas in your own project directly with Node.js

The following instructions assume yarn/node.js.

  • yarn init

  • yarn add @devhelpr/flowrunner-canvas --dev

  • mkdir assets

  • add dev server via node.js:

add the following to a new file 'flowrunner-canvas.js' in the root of your project :

let startFlowStudioServer = require('@devhelpr/flowrunner-canvas/server/startFlowStudioServer');

startFlowStudioServer.start('./assets/flow.json');
  • add default flow file in assets directory :

flow.json

with contents an empty array : []

(you can place this file in another location, in that case change the location in the flowrunner-canvas.js file)

  • start flowrunner-canvas server via NodeJs directly:

node flowrunner-canvas.js

  • in your local browser (chrome is preferred) visit localhost:4000 to start the flowrunner-canvas webapp

Publish and build instruction in case you want to contribute to flowrunner-canvas itself

  • npx gulp

    (also needed before publishing a new version)

  • npm version [new version number]

  • npm publish

Esbuild experimental builder

npx gulp esbuild

Flow-editor with local storage provider for testing

http://localhost:4000/flow-editor-only