[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.


  1. Carbone On-premise with version 5 or higher


docker run -t -i --rm -e CARBONE_EE_LICENSE -e CARBONE_EE_STUDIO=true -p 4000:4000 carbone/carbone-ee:full-5.0.0-beta.6


  1. 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>


  1. 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: 04/04/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!