Skip to main content

ICP Ninja

Beginner
IDE
Tutorial

ICP Ninja is a web-based integrated development environment (IDE) for creating and deploying decentralized applications on the Internet Computer.

ICP Ninja provides a gallery of example projects you can explore to learn about different application types, architectures, and use cases. Each project can be edited, and then deployed to the mainnet directly from your web browser. Once deployed, you can open the application's frontend in your browser or make calls directly to the backend through the Candid UI.

From the ICP Ninja homepage, select an example project to get started. You can filter the project gallery by project type, language, and skill level. Project variations are available for Motoko and Rust backend source code. Each ICP Ninja project uses the React framework for the application frontend.

The "Hello, World!" example is the most beginner-oriented project available. It resembles the default project template generated by the CLI tool dfx.

Once a project is open in the ICP Ninja code editor, you can:

  • Learn more about the project's functionality, features, and structure by reading the project's README.md file.

  • Revise the project's frontend by editing files in the frontend folder. Some files will be intentionally immutable.

  • Review or edit the backend code in the backend/main.mo (Motoko projects) or backend/lib.rs (Rust projects) file.

  • Add a new file to either the frontend or backend canister.

  • Ask the AI learning assistant questions about ICP or get help with your project's code.

ICP Ninja is not designed to replace tooling like the IC SDK.

Select the "Deploy" button. At the bottom of the screen, the "Build Logs" tab will show output that describes the project's deployment progress, such as:

→ Reserving canisters
→ Building backend
→ Generating backend declarations
→ Building frontend
...

Once deployed, you will receive two URLs:

Backend canister smart contract:
https://a4gq6-oaaaa-aaaab-qaa4q-cai.icp1.io/?id=ts425-saaaa-aaaab-qbksq-cai
🥷🚀🎉 Frontend is available at:
https://2drrs-wqaaa-aaaab-qblbq-cai.icp1.io

The backend canister URL will open the Candid UI which can interact directly with the backend canister's methods. A method is a function exposed by the canister that can be called by a user, another canister, or the application's frontend.

The frontend URL will open the application's frontend user interface. To create this frontend, the project's React files (shown in the ICP Ninja code editor within the frontend/ folder) have been compiled and deployed as an asset canister.

A preview of both the frontend UI and backend Candid interface will be shown on the right of the code editor.

This application will be live for 20 minutes. A timer will be displayed next to the 'Deploy' button that indicates how much longer the project's canisters will be available. After 20 minutes, they will expire, and the URLs will become invalid. The project code will still be accessible, and you can redeploy the application at any time to view it for another 20 minutes.

To edit the project after it has been deployed, edit the code within the ICP Ninja code editor, then select "Redeploy." Redeploying the project will reset the 20-minute deployment timer and apply any changes you made to the project's files since the last deployment.

Download and develop locally​

To continue developing an ICP Ninja project or to add features to the project that exceed the IDE's current limitations, you can download the project's files and use dfx. From the ICP Ninja IDE, select the project's option menu, then select 'Download files'.

Then, read the BUILD.md file included in the downloaded files. It contains further instructions for downloading and using dfx with your ICP Ninja project.

Limitations​

ICP Ninja is currently undergoing active development and has implemented a few limitations that should be noted. These limitations will be removed and changed as the platform develops.

  • Chain Fusion: ICP Ninja currently does not support ICP's Chain Fusion features, such as signing and submitting transactions on other chains or making calls to the EVM RPC canister.

  • Supported packages: Only certain npm packages are supported by ICP Ninja projects. The package-lock.json file in each project contains the supported list. This list cannot be edited.

  • Project structure: Projects created and deployed on ICP Ninja must follow a specific project structure. They can only contain at maximum two canisters, a backend and a frontend. The frontend source code folder may only contain one subfolder, frontend/src.