> For the complete documentation index, see [llms.txt](https://guide.swiftxr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.swiftxr.io/plugins/webstudio.md).

# Webstudio

**Introduction**

SwiftXR is a powerful platform for creating and sharing interactive 3D, augmented reality (AR), and virtual reality (VR) experiences on the web. With the SwiftXR (3D/AR/VR) Integration for Webstudio, you can easily integrate SwiftXR Projects into your Webstudio website, enabling you to create immersive and interactive web experiences.

**Creating a Project in SwiftXR**

* Navigate to the SwiftXR Hub: Begin by visiting the SwiftXR Hub, or alternatively click on this link: <https://swiftxr.io/hub>&#x20;
* Initiate Project Creation: Once on Hub, click the “Create Project” button and enter your desired project name.
* Design or Develop: Utilize the intuitive editor to effortlessly add and customize SwiftXR components, bringing your 3D vision to life

<figure><img src="/files/KHm2hFM17lazOHv6y4vG" alt=""><figcaption></figcaption></figure>

**Publishing your SwiftXR Project**

* Utilize the editor to create your 3D vision using the SwiftXR components. Once satisfied with your creation, press the “Publish” or “Update” button to make your project live.

<figure><img src="/files/PK6UcOmHnZ36qSDOvDTZ" alt=""><figcaption></figcaption></figure>

**Copy Embed Code**

* After publishing, click the dropdown button beside the “Update” button and select “Share.” Within the Share modal, click the “Copy Embed” button to copy the embed code for your project

<figure><img src="/files/oCyXNAGbLW0GO7ZQRZvC" alt=""><figcaption></figcaption></figure>

**Integrating SwiftXR into Webstudio Website**

* Go to [webstudio.is](http://webstudio.is) and create an account or log in if you already have one.
* In the webstudio homepage, choose the option that says “New blank project” in the top right corner of your page.

<figure><img src="/files/FlLQVmfaXQOxHjp2tb7N" alt=""><figcaption></figcaption></figure>

* After clicking on the “New blank page” button, a page would show up asking you to name your website, give it a name “e.g SwiftXR embedding”.
* Click on “Create Project”.

<figure><img src="/files/yLanZfdk688RwHJNRsz7" alt=""><figcaption></figcaption></figure>

**Add an HTML Element**

* After clicking on the “Create Project” button, you would be taken to the Webstudio editor.
* In the editor,click on the plus (+) icon in the top left corner of your page and click on the HTML Embed (\</>) under the “Components”.

<figure><img src="/files/QMmfkWoG9D5kbb6CMTsC" alt=""><figcaption></figcaption></figure>

**Insert Your SwiftXR Embed Code**

* After clicking on the “HTML Embed”, click on “Settings” in the top right corner of your page.
* You would see a tiny code editor right below the “Settings” panel where you can paste your SwiftXR Embed Code

<figure><img src="/files/eWBoI1KWriQBf31HhBwB" alt=""><figcaption></figcaption></figure>

**Viewing your Product in the Website**

* After pasting your SwiftXR iframe embed code in the editor, you would automatically see your live product in your website

<figure><img src="/files/vVuRZIHHbh2wLXoMOnAU" alt=""><figcaption></figcaption></figure>

**Publishing your Website**

* In the top right corner of your page you would see a “Publish” button, click on it to publish your website.

<figure><img src="/files/Ss80fse9Uknfv0v1ezT3" alt=""><figcaption></figcaption></figure>

**Viewing your Scene in the Web, AR or VR**

* After clicking on the “Publish” button, you would see your SwiftXR experience displayed directly inside your Webstudio site

<figure><img src="/files/79r0PJ4WSkYuQ22CgZ3f" alt=""><figcaption></figcaption></figure>

**Conclusion**

Integrating SwiftXR into Webstudio is straightforward using the HTML Embed component. By copying your SwiftXR project’s embed code and pasting it into Webstudio, you can quickly bring interactive 3D and XR experiences into your site without extra plugins. Once embedded, you can customize its size, styling, and placement to match your design, then publish to share your XR project with your audience. This makes Webstudio a flexible option for showcasing immersive content powered by SwiftXR.

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide.swiftxr.io/plugins/webstudio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.