[Carbone v5][Quickstart] Embedded Carbone Studio in a web app
How to include Carbone Studio in your web application
Here's a quickstart to creating a very simple HTML page with Carbone Studio.
Carbone On-premise with version 5 or higher
docker run --platform "linux/amd64" -t -i --rm -e CARBONE_EE_LICENSE -e CARBONE_EE_STUDIO=true -p 4000:4000 carbone/carbone-ee:full-5.0.0-beta.0
Create the following index.html file
<html>
<head>
<title>
Carbone Studio Embedded
</title>
</head>
<body>
<script src="http://localhost:4000/carbone-studio.js"></script>
<script type="text/javascript">
// Instantiate the Web component
const studio = document.createElement('carbone-studio');
// Add the studio component to the DOM
document.body.appendChild(studio);
// Configure the studio
studio.setConfig({
origin : 'http://localhost:4000',
token : '',
});
studio.addEventListener('connected', (e) => { console.log('studio connected. ', e) });
studio.addEventListener('disconnected', (e) => { console.log('studio disconnected. ', e) });
studio.addEventListener('options:updated', (e) => { console.log(e.detail) });
studio.addEventListener('template:updated', (e) => { console.log(e.detail) });
</script>
<style>
carbone-studio {
height:100%;
width:100%;
}
</style>
</body>
</html>
Starting an http server
In the folder containing the index.html file :
# Install http-server
npm install http-server
# Run server
npx http-server
And now your new page with Carbone Studio is available here :
http://localhost:8080/
Updated on: 01/27/2025
Thank you!