Canvas SDK is a JavaScript library that contains everything developers need to create new widgets.
Widgets are Miro entities, similar to stickies and images. They can be interactive, animated, and use high-fidelity graphics.
New widgets can be developed without modifying the Miro codebase. This allows to rapidly expand Miro capabilities and eventually, also open up Widget development to third parties.
-
Make sure you've set up VPN.
-
Clone the Canvas SDK repository to your machine. This monorepo contains various project published as NPM packages.
git clone git@github.com:miroapp-dev/surface.git
Make sure you have installed:
Install Brew.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Install Xcode version 12 or higher.
To check the version of Xcode, run:
/usr/bin/xcodebuild -version`
The result should look similar to this:
Xcode 15.0.1
Build version 15A507
Check that xcode-select
is configured to use xcodebuild
, not command line tools:
xcode-select -p
/Applications/Xcode.app/Contents/Developer
If you get some other response, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer`
Additionally, make sure to clean Bazel cache by running bazel clean --expunge
.
Your NPM credentials must be set up correctly. Run the following command to check your credentials:
npm whoami
The result should print you username.
You should have Python 3 installed and python3
command should work:
python3 --version
Python3 3.11.5
If you get a different response, you may need to symlink python
to python3
, or run brew install python3
to install Python 3.
Everything is built using Bazel. We use Bazelisk — a wrapper for Bazel, which automatically picks the right version of Bazel with respect to your current working directory and downloads it from the official server.
To install Bazelisk, use one of the following methods:
The Canvas SDK contains the following projects:
A standalone playground to explore the rendering engine and SurfaceWidgetSDK.
Run the following command to start the playground:
bazel run //:WidgetClient
Open the browser and navigate to http://localhost:8080/.
- Language: TypeScript
- Location:
src/Frontend/WidgetClient/
- README
TBD: A declarative, stateless, and retained mode graphics API.
- Language: TypeScript
- Location:
src/CanvasAPI/
- API documentation: TBA
- README
TBD: An SDK for developing widgets using a React-like API.
- Language: TypeScript
- Location:
src/SurfaceWidgetSDK/
- API documentation
- README
2D-vector rendering engine for SurfaceWidgetSDK.
- Language: C++
- Location: all
.cpp
files insrc/
- API documentation
- README
A React component that wraps the Monaco Code Editor fully configured for developing widgets.
- Language: TypeScript
- Location:
src/WidgetEditor/
- README