diff --git a/docs/GraFx-Studio/integration/getting-started/debugpanel.png b/docs/GraFx-Studio/integration/getting-started/debugpanel.png new file mode 100644 index 00000000..8623dfcd Binary files /dev/null and b/docs/GraFx-Studio/integration/getting-started/debugpanel.png differ diff --git a/docs/GraFx-Studio/integration/getting-started/index.md b/docs/GraFx-Studio/integration/getting-started/index.md index 241b029c..6e9865c8 100644 --- a/docs/GraFx-Studio/integration/getting-started/index.md +++ b/docs/GraFx-Studio/integration/getting-started/index.md @@ -1,8 +1,3 @@ ---- -tags: - - studioAPI ---- - # GraFx studio integration GraFx studio is a client side browser application. @@ -33,6 +28,16 @@ To integrate GraFx Studio you will make use of the editor SDK. This SDK dynamica We have [SDK reference documentation](https://chili-publish.github.io/studio-sdk/index.html){target="_blank"} and the [SDK codebase](https://github.com/chili-publish/studio-sdk){target="_blank"} is open sourced. +### SDK Version + +Integrating an SDK into your project can be done in two ways: using a **JavaScript link** or a **package manager** like NPM. + +Using a JavaScript link connects directly to the **latest hosted version**, ensuring automatic updates and access to new features. However, this method can lead to unexpected changes if the SDK is updated. + +Using a package manager like NPM allows you to download and install a **specific SDK version**, offering more control and stability. This approach is beneficial for maintaining consistency, especially in larger projects, but requires manual updates to access new features or security improvements. + +The choice between these methods depends on your project's needs for latest updates versus stability and the team's ability to manage SDK updates. + ### Demo integrations To make life easier, we have created a couple of [demo integrations](https://github.com/chili-publish/studio-sdk-integration-examples){target="_blank"}, so you don't have to start from scratch. @@ -41,7 +46,7 @@ You can use this script in your HTML to always get the latest SDK version: ``` js - + ``` Or you can use NPM to install a specific SDK version, with the following command: @@ -56,7 +61,21 @@ You should subscribe to specific events instead of the global stateChanged event ### Debug panel -On the top left of the editor canvas there is a button to open the debug panel. This panel shows a log of all interactions with the editor engine. This can help while building your integration. +The shortcut will open the debug panel. + +Mac: ⌥ (option) + 🌐 fn + F1 + +Windows: Alt + F1 + +![Debug panel](debugpanel.png) + +This panel shows a log of all interactions with the SDK. This can help while building your integration. + +There is also an FPS graph, to display the performance of the Editor. + +The "Info" tab shows versions of the Engine and SDK. + +A triggers tab holds several buttons to trigger events for the template. ### GraFx Connector