# Astro Integration

Astro is a very popular polyglot framework, mainly due to it's capabilities of integrating multiple ui libraries within it.

You can also build fast webapps using Weblabs by integrating it inside of astro, and it is actually super easy to do.

{% hint style="info" %}
Weblabs does not support SSR, hence it has no SSR driver for Astro. Use Weblabs when you need performant webapp but not reliant on SEO, i.e dashboards, editors and so on.
{% endhint %}

### Using Script Tag

You can directly integrate weblabs inside of astro pages via scripts, that also supports modularity, and can import other weblabs components from your codebase or npm.

{% code title="index.astro" %}

```html
---
---
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="app"></div>
        <script>
            import { render } from '@weblabsjs/core'
            import { p } from '@weblabsjs/core/components'
            
            render("app", p("Hello world from Weblabs"))
        </script>
    </body>
</html>
```

{% endcode %}

### Using External Codebase

You can create a dedicated directory for weblabs components/pages and then import them into the astro pages as required.

{% code title="src/weblabs/index.ts" %}

```javascript
import { render } from '@weblabsjs/core'
import { p } from '@weblabsjs/core/components'

export default function myApp() {
    render("app", p("Hello World"))
}
```

{% endcode %}

{% code title="" %}

```html
---
---
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="app"></div>
        <script>
            import myApp from '../weblabs/index'
            myApp()
        </script>
    </body>
</html>
```

{% endcode %}

This is how you can add performant Weblabs components inside of your views. You can also do this in pretty much any framework of your wish, make sure you call render and that's all. We are also working on an intercom for isolated components, to and from react or any other component to enable them sharing data through a global network of namespaces.


---

# Agent Instructions: 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://creatorlabs.gitbook.io/weblabs/understanding-weblabs/astro-integration.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.
