Set up our full Starter Kit
Now that you've finished the homework and have a good idea of how Embeddable components work, you're all set to build whatever components you want. That said, you can also make use of our existing library of charts and controls instead of having to reinvent the wheel. This starter library comes as a single NPM package (it's already in the boilerplate you downloaded earlier) and has full support for everything Embeddable does, including using themes.
Here's what you need to do to get set up:
Delete the Example components
You probably don't need a "Hello World" component or a "TextInput" component, and our starter kit includes a more robust Pie chart. So go ahead and delete the entire example
directory in the src/embeddable.com/components
directory.
Uncomment the starter kit
Open embeddable.config.ts
and uncomment the componentLibraries
line (typically line 14 (opens in a new tab) if you haven't changed anything else). Save that file.
Re-build or re-run the dev server
If you were running the dev server, stop it and re-run it. If you were building the code, run embeddable:build
and embeddable:push
again (see Building and Pushing (opens in a new tab) if you need a refresher).
That's it! You now have access to a full suite of components, including charts, tables, and controls. You can see these by clicking "Add Component" in your Embeddable Dashboard. You're now fully prepared to move forward with Embeddable.
When defining your data models, you can store these in the same repo, or create a separate one.