[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 -t -i --rm -e CARBONE_EE_LICENSE -e CARBONE_EE_STUDIO=true -p 4000:4000 carbone/carbone-ee:full-5.0.0-beta.6

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

Was this article helpful?

Thank you!