By Crayons and For Crayons

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Access the most powerful time series database as a service
  • ONLYOFFICE ONLYOFFICE Docs — document collaboration in your environment
  • Sonar - Write Clean JavaScript Code. Always.
  • styled-web-components

    Style property primitives for Web components inspired by styled-system

    In addition to the above mentioned libraries, I have also used two of my own npm libraries called styled-web-components and crayons-extensions. Let's have a brief look at them.

  • crayons-extensions

    Extensions for Crayons components

    crayons-extensions is a small collection of layout components built as an extension for Crayons components. It will help you to construct complex UI layouts with simple component primitives like fw-flex, fw-grid, etc.,

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    It is using Webpack for bundling, Redux and Immer for application state management.

  • JSZip

    Create, read and edit .zip files with Javascript

    It uses other utility libraries like Lodash, JSZip and SortableJS. JSZip is used to package the user interface markup into HTML files and other required JavaScript files for a Marketplace App boilerplate in a compressed format and download them from the browser.

  • stencil

    A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

    The app is built using vanilla Web Components without using any component publishing libraries like Stencil, Lit and so on. The reason being I met with some roadblocks in building a drag-n-drop editor using these libraries. Actually the Crayons Team itself is using Stencil to build the Crayons components using TypeScript and React-like component semantics and finally publish them as platform native Web components and React wrappers for the same. You can find out more about this in the Stencil documentation.

  • sortablejs

    Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

    It uses other utility libraries like Lodash, JSZip and SortableJS. JSZip is used to package the user interface markup into HTML files and other required JavaScript files for a Marketplace App boilerplate in a compressed format and download them from the browser.

  • redux

    Predictable state container for JavaScript apps

    It is using Webpack for bundling, Redux and Immer for application state management.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • React

    The library for web and native user interfaces

    The original idea and inspiration for the Crayons Playground came from the full-featured visual editor and code generator for React using Chakra UI called openchakra. All the underlying architecture, code organization and design & communication patterns are borrowed from openchakra. The only difference is Crayons Playground doesn't make use of any JavaScript framework whereas openchakra is completely built using React.

  • openchakra

    ⚡️ Full-featured visual editor and code generator for React using Chakra UI

    The original idea and inspiration for the Crayons Playground came from the full-featured visual editor and code generator for React using Chakra UI called openchakra. All the underlying architecture, code organization and design & communication patterns are borrowed from openchakra. The only difference is Crayons Playground doesn't make use of any JavaScript framework whereas openchakra is completely built using React.

  • lodash

    A modern JavaScript utility library delivering modularity, performance, & extras.

    It uses other utility libraries like Lodash, JSZip and SortableJS. JSZip is used to package the user interface markup into HTML files and other required JavaScript files for a Marketplace App boilerplate in a compressed format and download them from the browser.

  • lit

    Lit is a simple library for building fast, lightweight web components.

    The app is built using vanilla Web Components without using any component publishing libraries like Stencil, Lit and so on. The reason being I met with some roadblocks in building a drag-n-drop editor using these libraries. Actually the Crayons Team itself is using Stencil to build the Crayons components using TypeScript and React-like component semantics and finally publish them as platform native Web components and React wrappers for the same. You can find out more about this in the Stencil documentation.

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    The original idea and inspiration for the Crayons Playground came from the full-featured visual editor and code generator for React using Chakra UI called openchakra. All the underlying architecture, code organization and design & communication patterns are borrowed from openchakra. The only difference is Crayons Playground doesn't make use of any JavaScript framework whereas openchakra is completely built using React.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts