https://github.com/centralmind/artifacts
Artifact Viewer for Generative AI
https://github.com/centralmind/artifacts
Last synced: about 1 year ago
JSON representation
Artifact Viewer for Generative AI
- Host: GitHub
- URL: https://github.com/centralmind/artifacts
- Owner: centralmind
- License: mit
- Created: 2024-08-18T20:10:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-27T09:41:24.000Z (almost 2 years ago)
- Last Synced: 2025-03-29T06:04:49.497Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@centralmind/artifacts
- Size: 167 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CentralMind Artifacts
[![NPM version][npm-image]][npm-url]
[](https://opensource.org/licenses/MIT)
Artifact viewer for Generative AI. The library provides a React component to compile and run any React or Vue.js code in a secure browser environment. [Tailwind CSS](https://tailwindcss.com/) styling and [shadcn/ui](https://ui.shadcn.com/) components are both supported.
## Table of contents
* [Installation](#Installation)
* [Usage](#Usage)
* [License](#license)
## Installation
```console
$ npm install @centralmind/artifacts
```
## Usage
### React Artifacts
```tsx
import { ArtifactViewer } from '@centralmind/artifacts';
const files = {
'/app.tsx': `import { useState } from 'react';
import { Button } from "@/components/ui/button";
export default function App() {
const [count, setCount] = useState(0);
return (
{count}
setCount(count + 1)}>Increment
);
}`};
export default function App() {
return ;
}
```
### Vue.js Artifacts
```tsx
import { ArtifactViewer } from '@centralmind/artifacts';
const files = {
'/app.vue': `
Hello World!
export default {
name: 'App',
};
#app {
text-align: center;
margin-top: 60px;
}
h1 {
color: #42b983;
}
`,
};
export default function App() {
return ;
}
```
#### HTML Artifacts
```tsx
import { ArtifactViewer } from '@centralmind/artifacts';
const files = {
'/index.html': `
Hello World
Hello, World!
This is a simple HTML page that displays "Hello, World!"
`,
};
export default function App() {
return ;
}
```
## License
[MIT](LICENSE)
[npm-url]: https://www.npmjs.com/package/@centralmind/artifacts
[npm-image]: https://img.shields.io/npm/v/@centralmind/artifacts