How I built a cross-framework frontend library

• schedule-x

  4 864 9.6 TypeScript

  Material design event calendar and date picker

  

This article will discuss the general concept of building a cross-framework frontend library. It will also display some examples of how this was applied when building the event calendar Schedule-X.

• Preact

  111 36,118 9.3 JavaScript

  ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

  

At the very bottom of the image, there are 3 blocks that I chose to call application components. If you are building a cross-framework library, these can be built with whatever tools you want! Only catch is, all the tools you use to build it, will be needed by everyone consuming it. So choose wisely, and be mindful of how many kilobytes of third party code you will need in order to ship. In Schedule-X, I chose to use Preact. You will probably be fine with most lightweight virtual DOM libraries, and just like with frameworks there are a few to pick from.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react

  1 1 9.3 TypeScript

  React components for Schedule-X (by schedule-x)

  

React implementation: https://github.com/schedule-x/react/blob/main/src/schedule-x-calendar.tsx

Suggest a related project