https://github.com/xcancloud/openapidesigner
OpenAPIDesigner is an open-source OpenAPI specification design tool that allows developers to design, write, and validate OpenAPI specifications.
https://github.com/xcancloud/openapidesigner
openapi openapi-edtor openapi-specification swagger
Last synced: 19 days ago
JSON representation
OpenAPIDesigner is an open-source OpenAPI specification design tool that allows developers to design, write, and validate OpenAPI specifications.
- Host: GitHub
- URL: https://github.com/xcancloud/openapidesigner
- Owner: xcancloud
- License: gpl-3.0
- Created: 2025-02-27T07:26:46.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-03-10T07:19:11.000Z (11 months ago)
- Last Synced: 2025-03-10T08:26:02.257Z (11 months ago)
- Topics: openapi, openapi-edtor, openapi-specification, swagger
- Language: JavaScript
- Homepage: https://www.xcan.cloud
- Size: 61.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OpenAPIDesigner
[English](README.md) | [δΈζ](README_zh.md)
[](https://cn.vuejs.org/guide/introduction)
[](https://2x.antdv.com/components/overview)
[](https://tailwindcss.com/docs)
[](https://swagger.io/specification/)
OpenAPIDesigner is an open-source visual design tool for creating, editing and validating OpenAPI 3.0 specifications.
## β¨ Features
- Visual API specification designer
- Real-time OpenAPI schema validation
- Multi-framework integration (Vue/React/Plain JS)
- Dual-language support (English/Chinese)
- Dynamic API documentation preview
## π¦ Installation
```bash
npm install open-api-designer
```
## π Usage
### Basic HTML Integration
```html
```
```javascript
import OpenApiDesigner from 'open-api-designer';
const initialSpec = {
openapi: "3.0.1",
info: {
title: "API Docs",
version: "1.0.0"
}
};
const wrap = document.querySelector('.openapi-container');
const designer = new OpenApiDesigner();
wrap.innerHTML= `<${designer.compName}> ${designer.compName}>`
custom.setAttribute('open-api-doc', JSON.stringify(initialSpec));
```
### Framework Integration
#### React
```jsx
import OpenApiDesigner from 'open-api-designer';
function renderCustomElement(tagName, props) {
return React.createElement(tagName, props);
}
export default function ApiDesigner() {
const designInstance = new OpenApiDesigner({});
return renderCustomElement(designInstance.compName, {'open-api-doc': 'https://generator3.swagger.io/openapi.json'})
}
```
#### Vue
```vue
import { onMounted, ref } from 'vue';
import OpenApiDesigner from 'open-api-designer';
const designInstance = ref();
onMounted(() => {
designInstance.value = new OpenApiDesigner();
});
const changeLanguage = () => {
designInstance.value && designInstance.value.changeLanguage('en')
}
```
## βοΈ Configuration Options
### Constructor Parameters
| Parameter | Type | Default | Description |
|-------------------|----------|---------|------------------------------|
| `defaultFontSize` | string | 13 | Default font size for display |
### Attribute Parameters
| Parameter | Type | Default | Description |
|-------------------|----------|---------|---------------------------------------|
| `open-api-doc` | string | '{}' | OpenAPI documentation JSON data or URL to JSON file |
| `language` | string | en | UI language (en/zh_CN) |
### Core Methods
| Method | Description |
|----------------------|-------------------------------------------|
| `getDocApi()` | Get current OpenAPI JSON specification |
| `updateData()` | Update specification data |
| `changeLanguage(value)` | Change language (en/zh_CN) |
## π§ͺ Demo Preview
```bash
npm run build
npm run demo
> open-api-designer@1.0.0 demo
> http-server -p 8080 & open http://127.0.0.1:8080/demo/index.html
```
Access demo at `http://127.0.0.1:8080/demo/index.html`
## π License
Licensed under [Apache-2.0 license](http://www.apache.org/licenses/).