# Custom Component

With this custom component, it allows editors to add script code with output components that can be used in the app editor. You can follow these steps to create a custom component.

This provides a starter template for building custom qore app compoent using Rollup and TypeScript.

### Setup a new project

To use this package, run the following command in your terminal:

```
npm init qore-app-component [component name]
```

This will create a new directory with the specified package name and install all necessary dependencies.

### Development

Start edit your component in `src/[componentName].tsx`, all qore apps api are available via props with more api added viw import from `@qorebase/app-component` package. If you're using third party package, make sure the package supports schema script module, if not, that package will be bundled by rollup.

### Usage

To build the package, run the following command:

```
npm run build
```

This will compile the TypeScript code and bundle the source and commonjs packages with Rollup.

### Publish

To publish the package, run the following command to bump the version:

```
npm version [major|minor|patch|prerelease]
```

This will bump the version in `package.json` and `package-lock.json` and create a new commit and tag.

Then, run the following command to publish the package:

```
npm publish
```

###


---

# 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://docs.qore.dev/component/custom-component.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.