> [!NOTE]
> This project is part of the ZikoJS ecosystem.

Ziko-wrapper

Ziko-Wrapper is a tool that facilitates the rendering of ZikoJS elements within other frameworks and the embedding of framework-specific components into ZikoJS, enabling seamless integration and interoperability between different ecosystems.

Current Support Table for Ziko-Wrapper

Integrate Zikojs inside Other Environment

$3

js

// HelloFromZiko.js

import {h1} from "ziko"

export default HelloFromZiko=({color})=>{

    return h1(

Hello World, this is a Zikojs component.

).style({

        color

    })

}





$3

#### JSX Based

jsx

import ZikoWrapper from "ziko-wrapper/react"

// import ZikoWrapper from "ziko-wrapper/solid"

// import ZikoWrapper from "ziko-wrapper/preact"

import HelloFromZiko from "./HelloFromZiko.js"

export default function App(){

    return (

        

                         color="blue"  

            />

        

    )

 }





#### Vue

xml

 

#### Svelte

jsx

---

import ZikoWrapper from "ziko-wrapper/svelte";

import HelloFromZiko from "./HelloFromZiko.js"

---



#### Astro 

- Customize the astro.config.mjs file

js

import { defineConfig } from 'astro/config';

import ziko from "ziko-wrapper/astro"

export default defineConfig({

    integrations : [

        ziko()

    ]

})



- Define The component

js

// HelloFromZikoJs.js

import {p} from "ziko"

export default HelloFromZikoJs=({color})=>p("Hello From Zikojs").style({color})



- Render The component

jsx

---

 import HelloFromZiko from "./HelloFromZiko.js"

---

  color="orange"

  client:only 

/>

Integrate Other Framewrok components inside Zikojs

$3

Supports

Licence

> [!NOTE]
> This project is part of the ZikoJS ecosystem.

Ziko-wrapper

Current Support Table for Ziko-Wrapper

Integrate Zikojs inside Other Environment

$3

js

// HelloFromZiko.js

import {h1} from "ziko"

export default HelloFromZiko=({color})=>{

    return h1(

Hello World, this is a Zikojs component.

).style({

        color

    })

}





$3

#### JSX Based

jsx

import ZikoWrapper from "ziko-wrapper/react"

// import ZikoWrapper from "ziko-wrapper/solid"

// import ZikoWrapper from "ziko-wrapper/preact"

import HelloFromZiko from "./HelloFromZiko.js"

export default function App(){

    return (

        

                         color="blue"  

            />

        

    )

 }





#### Vue

xml

 

#### Svelte

jsx

---

import ZikoWrapper from "ziko-wrapper/svelte";

import HelloFromZiko from "./HelloFromZiko.js"

---



#### Astro 

- Customize the astro.config.mjs file

js

import { defineConfig } from 'astro/config';

import ziko from "ziko-wrapper/astro"

export default defineConfig({

    integrations : [

        ziko()

    ]

})



- Define The component

js

// HelloFromZikoJs.js

import {p} from "ziko"

export default HelloFromZikoJs=({color})=>p("Hello From Zikojs").style({color})



- Render The component

jsx

---

 import HelloFromZiko from "./HelloFromZiko.js"

---

  color="orange"

  client:only 

/>