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 va 8000 rious project published as NPM packages.
git clone https://github.com/miroapp-dev/surface/tree/master
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 15A507Check that xcode-select is configured to use xcodebuild, not command line tools:
xcode-select -p
/Applications/Xcode.app/Contents/DeveloperIf 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 whoamiThe result should print you username.
You should have Python 3 installed and python3 command should work:
python3 --version
Python3 3.11.5If 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 //:WidgetClientOpen 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
.cppfiles insrc/ - API documentation
- README
A React component that wraps the Monaco Code Editor fully configured for developing widgets.
- Language: TypeScript
- Location:
src/WidgetEditor/ - README