A web component built with Stenc 8000 il.js that provides an interactive visual interface for building and modifying GraphQL schemas. This component allows users to create, edit, and visualize GraphQL types and their relationships through a drag-and-drop interface.
- 🎨 Visual schema builder with drag-and-drop interface
- 📝 Interactive type and field editing
- 🔄 Real-time schema generation
- 🎯 Input validation for GraphQL naming conventions
- 📚 Support for type and field descriptions
- 🔌 Easy integration with any web framework
npm install gql-wc<graphql-schema-builder></graphql-schema-builder><graphql-schema-builder schema="type User { id: ID! name: String! }"></graphql-schema-builder>| Property | Type | Description |
|---|---|---|
schema |
string |
Initial GraphQL schema to load |
externalEntities |
object |
External entities and attributes that can be used in the schema |
| Event | Description |
|---|---|
schemaChange |
Emitted when the schema is modified, contains the updated types and GraphQL schema |
The schemaChange event emits an object with the following structure:
{
types: GraphQLType[]; // Internal representation of the types
graphqlSchema: string; // Generated GraphQL schema string
}- Clone the repository
- Install dependencies:
npm install
- Start the development server:
npm start
To build the component for production:
npm run build<graphql-schema-builder></graphql-schema-builder>
<script>
const builder = document.querySelector('graphql-schema-builder');
builder.addEventListener('schemaChange', (event) => {
console.log('Generated Schema:', event.detail.graphqlSchema);
});
</script><graphql-schema-builder id="schema-builder"></graphql-schema-builder>
<script>
const schema = `
type User {
id: ID!
name: String!
email: String
posts: [Post!]
}
type Post {
id: ID!
title: String!
content: String
author: User!
}
`;
const builder = document.getElementById('schema-builder');
builder.schema = schema;
</script>Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.