https://github.com/graphql-editor/graphql-dryad

GraphQL JAMstack rendering engine
https://github.com/graphql-editor/graphql-dryad

Last synced: 4 months ago
JSON representation

GraphQL JAMstack rendering engine

• Host: GitHub
• URL: https://github.com/graphql-editor/graphql-dryad
• Owner: graphql-editor
• Created: 2020-09-15T14:06:09.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-23T15:10:57.000Z (over 3 years ago)
• Last Synced: 2025-10-08T15:48:56.282Z (9 months ago)
• Language: TypeScript
• Size: 422 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

          
# GraphQL Dryad

Live custom framework based js and css ide. This is a new approach to create and bundle browser apps inside browser.

## Installation

```sh

npm i graphql-dryad

```

Install peer dependencies

```sh

npm i react react-dom monaco-editor @monaco-editor/react

```

```js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {

  plugins: [

    new MonacoWebpackPlugin({

      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options

      // Add your languages here

      languages: ['javascript'],

    }),

  ],

};

```

You can check exact webpack configuration in `sandbox` folder.

## How to use

```tsx

import React, { useState } from 'react';

import { GraphQLDryad } from 'graphql-dryad';

const initialValues = {

  js: 'return html`
Hello world
`',

  css: '@import "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css";',

};


export const Main = () => {

  const [v, setValue] = useState(initialValues);

  return (

    


      

    

  );

};

```


## How to write in dryad editor

You are writing regular esmodule which default part is used during static site generation.

```js

// You can use esmodules imports

export const head = () => {

  return html` My website title `;

};

export default async () => {

  const someMarkdown = md`

# hello world

  `;

  return html` 
${someMarkdown}
 `;

};

```