1.0.0 • Public • Published


Frame is a flow based programming library for databases, APIs, utilities, objects, schemas and more!


  • Cross Platform - Runs everywhere Javascript does
  • Declarative style (tell the library WHAT you want, not how you want it) - 1 2 3 4
  • Custom module loaders (Browserify, Webpack, RequireJS, Github, Gist, GunDB, [any other module loader here])
  • Easy NodeRED-like Syntax
  • Modules known as Blueprints are easily shareable!
  • Blueprints have an extremely easy syntax, with Schema support.
  • Singletons offer optional Shared resources built right in! (New flows don't need multiple connections, etc)
  • Functions have a lot of freedom, they can use return values, Promises, async/await, or use the callback. Frame gets out of your preferred way/style of coding.

Coming Soon:

  • Full featured drag and drop Web + Electron IDE for building the future of apps
  • Mobile IDE (React Native) for iOS, Android, etc
  • Transpiling + Build steps for truly cross platform libraries
  • Hosted solution without having to upload your Blueprints somewhere (along with transpiling configurations)
  • Error propagation via the flow (with custom paths), without falling over


Custom Loaders

// From Github files
const SomeBlueprint = Frame("git://pathToYourFile.js")

// From Github repos
const SomeBlueprintFromRepo = Frame("git://SomeOrganization/YourFavoriteRepo")

// From HTTP URLs
const BlueprintFromURL = Frame("http://example.com/yourFile.js")

// From many different databases and stores
const BlueprintFromDB = Frame("mongodb://fileInDb.js")

Easy syntax

Render HTML/CSS with a Message from a database (Gun)

  .from(Gun) // Receive a message from a database
  .to(Schema) // Validate message format
  .to(HTML) // Convert to HTML
  .to(Style) // Dynamic styles!
  .to(RenderFunction) // Finally render it, using our own function

Order does not matter

// Example #1: Multiple event handlers (Left to right processing.)

// Example #2: (Right to left processing.)

Example #3: (Somewhere in the middle)

Blueprint.js Example:

Blueprint = {
  name: 'Console',

  in: function(data) {
    return console.log(data)

Functional Programming:

function registerGunMessage() {


Multiple flow paths (Coming soon):


Fallback support for API, Databases, etc:

  .or() // call it like a function
  .or // can also be used with dot notation
  .timeout(5000) // Timeouts for any of the Blueprints!

Property Descriptions for automatic destructuring:

Blueprint = {
  describe: {
    in: {
      firstPropName: 'Some property desscription.',
      secPropName: 'Some other prop description.',

  in: function(data, props) {
    // props.firstPropName
    // props.secPropName

Multiple return styles:

Blueprint = {
  // Callback style - follows (err, data) callback convention
  in: function(data, props, callback) {
    callback(null, 'some data')

  // return primitives
  in: function(data, props) {
    return 'some data'
  // return promises
  in: function(data) {
    return new Promise(function(resolve, reject) {
      resolve('some data')
  // async/await
  in: async function(data) {
    return await someAsyncFunction()
  // Out event
  in: function(data) {
    this.out('some data')

More Examples coming soon!

Package Sidebar


npm i @frame-js/frame

Weekly Downloads






Unpacked Size

2.62 MB

Total Files


Last publish


  • bugs181