Weavy + Retool
Get started
Installing our demo Retool app is the absolute fastest and best way to learn how Weavy and Retool work together.
Follow our guide below, and you'll be up and running in minutes.
Guide
Create a Retool app with Weavy components
In this guide, we'll be adding all Weavy features as custom components so they'll show up in the Component Library in your Retool app - just drag and drop!
Prerequisites
You will need:
- A Weavy API key
- A Retool account
- Admin permissions in Retool
- Git
- Node.js
1. Weavy API key and backend
First, we need an API key to communicate with the Weavy backend.
Sign up for an account
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
Select what environment you want to use for the tutorial
We need an API key to communicate with Weavy for authentication, etc
2. Clone repo
The repo contains everything you need to set up and configure the demo app and use Weavy as custom components in your Retool app.
Start by cloning the repo
git clone https://github.com/weavy-labs/weavy-retool-components.git weavy-retool-components3. Install dependencies
Change your directory to
weavy-retool-components and run:
Install
npm install4. Environment variables
We need the environment URL and an API key to communicate with the Weavy backend. To make this available for the scripts in the repo, we need to place it in an .env file.
Copy into the
.env file in the root of the project
WEAVY_URL="WY_BACKEND_URL"
WEAVY_APIKEY="WY_API_*****************"Note
- Replace the
WY_BACKEND_URLwith the URL to your Weavy backend. - Replace the
WY_API_*****************with an API key for your Weavy backend.
You can find this information in your Weavy account.
No API key selected
You haven't selected an API key. If you do - code snippets, scripts and files you download will automatically be updated with API key and backend URL.
Create an
.env file in the root of your project folder, copy and paste the above into the file.5. Log in to Retool
Log in using the following command. You need to provide an API access token with read-and-write scopes for Custom Component Libraries. See the Retool API authentication documentation for instructions on generating an access token.
Log in to Retool CLI
npm run loginRun this command in the project's root folder.
6. Install demo app
Once you have your Retool authentication configured, you can run the installation script to upload and configure the Weavy components and the demo app.
Run the script in the project root
npm run create:demoThe script will automatically configure the following:
- It sets a global
WEAVY_URLJavascript variable. You can see it under Settings > Advanced settings > Preloaded Javascript in your Retool account. - It creates a
WeavyAuthenticationworkflow for authentication token handling in the Workflows section in Retool. The Workflow is configured with your Weavy API key. - It creates a
WeavyPageNavigationworkflow in the Workflows section for saving page metadata that is needed by Weavy Notifications to be able to navigate back to the container their content originated from. The Workflow is configured with your Weavy API key. - It installs the
Weavycomponents under Settings > Custom Components Library in your Retool account. - It creates a demo app called
Weavy Components - Basic Layoutin the Apps section in Retool.
7. Done!
Click the link in the terminal window, and there we have it - a complete Retool demo app using Weavy components.
Select data in the table and see how the right panel updates with collaboration components. In the top right corner, you can also see a messenger icon; click it to open a drawer with our messenger component.
It even works with notifications - toasts, deep navigation, and all - see the notifications icon in the top bar.
Now, imagine all this in your app!
Fill out all the values to continue.
Invalid input for the unique identifier.