JavaScript frameworks

Intermediate

JavaScript

Concept

To build user interfaces that utilize in-browser JavaScript, several frameworks can be used.

React

React: React is a library for creating user interfaces, and is supported as a default frontend development option within the dfx new command (dfx versions v0.17.0 and newer). You can learn more about React in the React quickstart guide.

Other React examples include:

• Vite + React + Motoko.

• Create-ic-app: React template.

• React to-do sample.

• React + ReactJS + React-Router.

• Vite + React + Material UI.

Next.js

Next.js: Next.js is an open-source framework that provides React-based apps with server-side website rendering and generation. Next.js can be used in an ICP application by generating static Next.js application files and pointing your frontend canister to those static assets. Learn more in the Next.js documentation.

Other Next.js examples include:

• Next.js + BlankUI.

• Next.js dapp example.

• Next.js IC starter template.

• Next.js calculator dapp template.

Vue

Vue is a progressive JavaScript framework commonly used for building single-page applications. Some examples using Vue include:

• Vue integration with dfx's webpack bootstrap.

• Create-ic-app: Vue template.

Svelte

Svelte is a compact JS framework for building detailed frontend components. It is supported as a default frontend development option within the dfx new command (dfx versions v0.17.0 and newer). Another example using Svelte is:

• Create-ic-app: Svelte template.

Resources

• React quickstart guide.

• Next.js documentation.

• Vue.

• Svelte.

• Create-ic-app.