JSight Online Editor (Frontend)

⭐ Star us on GitHub — it motivates us a lot! ⭐

JSight Online Editor – you've never designed API so fast. We really mean it.

Write 2-4 times less code.
Design API 2-3 times faster.
Download beautiful HTML docs 📖 or share API specifications in the cloud ☁️.
Do not distract from the API design because of the API description process.
Design API together, it is extremely convenient with JSight language.
No more multiple design iterations and edits required. All you need is to share the screen between the participants and come up with an API together right in the Editor. All this is possible thanks to the compactness and simplicity of the JSight language.
Compare JSight with Open API.

“JSight is as much simpler than OpenAPI as Markdown is simpler than HTML. At the same time, JSight is just as powerful.”

Constantine M., JSight CRDO.

List of JSight Online Editor features.

🐣 Quick Start

📖 Table of Contents

Getting Started
JSight API Language
Features
Roadmap
Configuration
Versioning
Dependencies
General Architecture
Testing
Contributing
Bugs and Feature Requests
Support
License
Resources
Partners
Acknowledgments

🚀 Getting Started

Browser Support

JSight Online Editor officially supports the latest browsers:

Chrome 102.0,
Firefox 101.0,
Safari 15.3.

Installing

Running Locally

Prerequisites

Node.js >= 14.18 — download.
npm >= 8.3.2 — included in the Node.js distribution.
Git >= 2.33 — download.
Docker >= 20.10 — download.
Docker Compose >= 2.2 — install.

Installing

Download the JSight Online Editor source code:	`git clone https://github.com/jsightapi/online-editor-frontend`
Navigate to the repository folder:	`cd ./online-editor-frontend/`
Start JSight Server (on port 8080): NOTE: You can also build JSight Server from source, see installation instructions.	`SERVER_HOST_PORT=8080 docker-compose -f jsight-server-docker-compose.yml up -d`
Check that the JSight Server is working by running the following command:	Linux: `curl --location --request POST "http://localhost:8080/" \ --header "Content-Type: text/plain" \ --data-raw "JSIGHT 0.3"` Windows cmd: `curl --location --request POST "http://localhost:8080/" ^ --header "Content-Type: text/plain" ^ --data-raw "JSIGHT 0.3"` Windows PowerShell: curl --location --request POST "http://localhost:8080/" ` --header "Content-Type: text/plain" ` --data-raw "JSIGHT 0.3"
If everything is in order, then you should receive a json in response, something like this:	`{"jdocExchangeFileSchemaVersion":"0.3.0","jsight":"0.3","resourceMethods":{},"tags":{}}`
Install required packages.	`npm install --legacy-peer-deps`
Start JSight Online Editor:	`npm start`
JSight Online Editor should open in a browser at http://localhost:3000/.

For more information on configuring the application, see the Configuration.

⚠️ SUPPORT: If you encounter any problems while launching JSight Online Editor, do not hesitate to contact our support, and we will respond as soon as possible:
Email: [email protected]
Telegram: https://t.me/jsight_support

Building and Running an Image Locally

Prerequisites

Git >= 2.33 — download.
Docker >= 20.10 — download.
Docker Compose >= 2.2 — install.

Installing

Download the JSight Online Editor source code:	`git clone https://github.com/jsightapi/online-editor-frontend`
Navigate to the repository folder:	`cd ./online-editor-frontend/`
Build and start JSight Online Editor: This command will launch two docker containers: the JSight Online Editor frontend and the JSight Server.	`FE_HOST_PORT=80 SERVER_HOST_PORT=8080 docker-compose -f docker-compose.yml up -d --build`
The JSight Online Editor should open in a browser at http://localhost/.

For more information on configuring the application, see the Configuration.

⚠️ SUPPORT: If you encounter any problems while launching JSight Online Editor, do not hesitate to contact our support, and we will respond as soon as possible:
Email: [email protected]
Telegram: https://t.me/jsight_support

📜 JSight API language

The JSight API language allows you to specify REST APIs with incredible speed and convenience. More information can be found in the Quick Tutorial or in the language specification.

JSight API language video lessons:

Here we give examples of the same API described using JSight API and OpenAPI.

Example 1. The simplest

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

JSIGHT 0.3

GET /cats/{id}
  200
    {
      "id"  : 123, // {min: 1}
      "name": "Tom"
    }

Pay attention to the main feature of the JSight API language. The basis for a data schema is an example of valid data. Additional data requirements are specified in C-like comments. This approach greatly simplifies the data schema and makes it intuitively clear. Practice shows that such schema is very simple to create, read and edit.

Learn more about the JSight language: Quick Tutorial.

⭐ Star us on GitHub — it motivates us a lot!

openapi: 3.0.1
info:
  title: ""
  version: ""
paths:
  /cats/{id}:
    get:
      parameters:
      - name: id
        in: path
        required: true
        schema: {}
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                type: object
                required: [id, name]
                properties:
                  id:
                    type: integer
                    minimum: 1
                    example: 123
                  name:
                    type: string
                    example: "Tom"

Example 2: User Types

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

JSIGHT 0.3
 
GET /cats      // Get all cats.
  200
    [@cat]

GET /cats/{id} // Get a cat by its id.
  200
    @cat
  
TYPE @cat      // Type “Cat”.
  {
    "id"  : 123,  // ID of the cat.
    "name": "Tom" // Name of the cat.
  }

Pay attention to how convenient it is to work with user types in JSight API. The type name is simply inserted where the type should be in the data schema. Everything is the same as in conventional programming languages.

More about user types: Quick Tutorial. Lesson 2. User types.

⭐ Star us on GitHub — it motivates us a lot!

openapi: 3.0.3
info:
  title: ""
  version: ""
paths:
  /cats:
    get:
      summary: Get all cats.
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Cat'
  /cats/{id}:
    get:
      summary: Get a cat by its id.
      parameters:
      - name: id
        in: path
        required: true
        schema: {}
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Cat'
components:
  schemas:
    Cat:
      description: Type “Cat”.
      type: object
      required: [id, name]
      properties:
        id:
          description: ID of the cat.
          type: integer
          minimum: 0
          example: 123
        name:
          description: Name of the cat.
          type: string
          example: "Tom"

Example 3: Schema

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

JSIGHT 0.3

TYPE @cat
{
  "id"      : 123,
  "name"    : "Tom",
  "birthday": "2006-01-02",          // {type: "date" }
  "email"   : "[email protected]",        // {type: "email"}
  "website" : "http://tom.cats.com", // {type: "uri"  }
  "salary"  : 13.23,                 // {precision: 2 }
  "friends" : [                      // {maxItems: 10 }
    @cat
  ],
  "bestFriend": @cat,       // {optional: true}
  "size"    : "XL"          // {enum: ["M", "L", "XL"]}
}

Details that are not obvious from the example of valid data are provided in small JSON objects in C-like comments. This approach allows you to write data schemas of any complexity, while keeping them compact and intuitive.

More about JSight Schema: Quick Tutorial. Lesson 4. Schemas.

⭐ Star us on GitHub — it motivates us a lot!

openapi: 3.0.3
info:
  title: ""
  version: ""
paths: {}
components:
  schemas:
    Cat:
      type: object
      required:
        - id
        - name
        - birthday
        - email
        - website
        - salary
        - friends
        - size
      properties:
        id:
          type: integer
          minimum: 0
          example: 123
        name:
          type: string
          example: "Tom"
        birthday:
          type: string
          format: date
          example: 2006-01-02
        email:
          type: string
          format: email
          example: "[email protected]"
        website:
          type: string
          format: uri
          example: "http://tom.cats.com"
        salary:
          type: number
          multipleOf: 0.01
          example: 13.23
        friends:
          type: array
          items:
            $ref: '#/components/schemas/Cat'
        bestFriend:
          $ref: '#/components/schemas/Cat'
        size:
          type: string
          enum: [M, L, XL]
          example: XL

Example 4. POST

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

JSIGHT 0.3
 
POST /cats // Create a new cat.
  Request
    {
      "id"  : 123,
      "name": "Tom"
    }
 
  200
    "OK" // {const: true}
 
  404 any
  500 empty

Please note that the POST request and the three response options are written in a clear and concise manner.

More about requests and responses: Quick Tutorial. Lesson 6. Requests and Responses.

⭐ Star us on GitHub — it motivates us a lot!

openapi: 3.0.3
info:
  title: ""
  version: ""
paths:
  /cats:
    post:
      summary: "Create a new cat"
      requestBody:
        content:
          application/json:
            schema:
              type: object
              required: [id, name]
              properties:
                id:
                  type: integer
                  minimum: 0
                  example: 123
                name:
                  type: string
                  example: "Tom"          
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                type: string
                enum: ["OK"]
        404:
          description: ""
          content:
            application/json:
              schema: {}
        500:
          description: ""

Example 5: Inheritance

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

JSIGHT 0.3

TYPE @pet
{
  "id"  : 123,
  "name": "Tom"
}

TYPE @cat
{ // {allOf: "@pet"}
  "likesMouses": true
}

TYPE @dog
{ // {allOf: "@pet"}
  "teethSize": "big" // {enum: ["big", "small"]}
}

This example shows how simple it is to inherit one type from another in JSight using the rule allOf.

Learn more: JSight Schema Specification. Rule "allOf".

⭐ Star us on GitHub — it motivates us a lot!

openapi: 3.0.3
info:
  title: ""
  version: ""
paths: {}
components:
  schemas:
    Pet:
      type: object
      required: [id, name]
      properties:
        id:
          type: integer
          example: 123
        name:
          type: string
          example: "Tom"
    Cat:
      allOf:
        - $ref: '#/components/schemas/Pet'
        - type: object
          required: [likesMice]
          properties:
            likesMice:
              type: boolean
    Dog:
      allOf:
        - $ref: '#/components/schemas/Pet'
        - type: object
          required: [teethSize]
          properties:
            teethSize:
              type: string
              enum: ["big", "small"]

Example 6. Full-fledged CRUD API

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

JSIGHT 0.3

GET /cats         // Get all cats.
  200 [@cat]      // Returns all cats.

POST /cats        // Create a cat.
  Request @cat
  200 @cat        // Success.

GET /cats/{id}    // Get a cat by its id.
  200 @cat        // Returns a cat.

PUT /cats/{id}    // Update a cat.
  Request @cat
  200 @cat        // Returns an updated cat.

DELETE /cats/{id} // Delete a cat.
  200 any

TYPE @cat // A cat.
{
  "id"   : 1,
  "name" : "Tom",
  "color": "black" // {enum: ["black", "white"]}
}

A full-fledged CRUD API took only 25 lines.

⭐ Star us on GitHub — it motivates us a lot!

openapi: 3.0.3
info:
  title: ""
  version: ""
paths:
  /cats:
    get:
      summary: Get all cats.
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Cat'
    post:
      summary: Create a cat.
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/Cat'
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Cat'
  /cats/{id}:
    parameters:
    - name: id
      in: path
      required: true
      schema: {}
    get:
      summary: Get a cat by its id.
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Cat'
    put:
      summary: Update a cat.
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/Cat'
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Cat'
    delete:
      summary: Delete a cat.
      responses:
        200:
          description: ""
          content:
            application/json:
              schema: {}
components:
  schemas:
    Cat:
      description: Type “Cat”.
      type: object
      required: [id, name, color]
      properties:
        id:
          type: integer
          example: 123
        name:
          type: string
          example: "Tom"
        color:
          type: string
          enum: ["black", "white"]

Example 7. Macros

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

JSIGHT 0.3
 
GET /cats // Get all cats.
  200 [@cat]
  PASTE @errorResponses
 
GET /cats/{id} // Get a cat by its id.
  200 @cat
  PASTE @errorResponses
 
TYPE @cat // Type “Cat”.
{
  "id"  : 1,
  "name": "Tom"
}
 
MACRO @errorResponses
  400 any
  401 any
  405 any
  500 any

Macros are a powerful feature of the JSight API language. It allows you to reuse parts of code as many times as you like.

More about macros: Quick Tutorial. Magic directive MACRO.

⭐ Star us on GitHub — it motivates us a lot!

openapi: 3.0.1
info:
  title: ""
  version: ""
paths:
  /cats:
    get:
      summary: Get all cats.
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/Cat'
        400:
          $ref: '#/components/responses/Error400'
        401:
          $ref: '#/components/responses/Error401'
        405:
          $ref: '#/components/responses/Error405'
        500:
          $ref: '#/components/responses/Error500'
  /cats/{id}:
    get:
      description: "Get a cat by its id."
      parameters:
      - name: id
        in: path
        required: true
        schema: {}
      responses:
        200:
          description: ""
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Cat'
        400:
          $ref: '#/components/responses/Error400'
        401:
          $ref: '#/components/responses/Error401'
        405:
          $ref: '#/components/responses/Error405'
        500:
          $ref: '#/components/responses/Error500'
components:
  schemas:
    Cat:
      description: Type “Cat”.
      type: object
      required: [id, name]
      properties:
        id:
          type: integer
          example: 1
        name:
          type: string
          example: "Tom"
  responses:
    Error400:
      description: ""
      content:
        application/json:
          schema: {}
    Error401:
      description: ""
      content:
        application/json:
          schema: {}
    Error405:
      description: ""
      content:
        application/json:
          schema: {}
    Error500:
      description: ""
      content:
        application/json:
          schema: {}

Example 8: Large REST API

JSight API 0.3 OpenAPI 3.0.1 (Swagger)

###
JSight 0.3 Demo API.
For more information see official docs: 
https://jsight.io/docs/jsight-api-0-3.
###

JSIGHT 0.3

INFO
  Title "Pets REST API"
  Version 1.0
  Description
    ## Overview

    The **Pets REST API** allows you to manage your pets.

    Powered by [JSight](http://jsight.io)©.

SERVER @prod // Production server.
  BaseUrl "https://pets.com/api/1.0"

SERVER @test // Test server.
  BaseUrl "https://192.168.0.100/1.0"

#======================= CATS =======================

#---------------------- /cats -----------------------

GET /cats // Get all cats.
  200     // Returns all cats.
    {
      "items": [@cat],
      "itemsCount": 25 // {min: 0}
    }

POST /cats      // Create a cat.
  Request @cat
  200 @cat      // Success.
  409 @error    // Error.

#------------------- /cats/{id} --------------------
URL /cats/{id}
  Path
    {
      "id": "CAT-123" // {type: "@petId"} - Cat's id.
    }

GET /cats/{id} // Get a cat by its id.
  200 @cat     // Return a cat.
  404 empty    // A cat is not found.

PUT /cats/{id} // Update a cat.
  Request @cat
  200 @cat     // Returns an updated cat.
  404 empty    // A cat is not found.
  409 @error   // Some error.

PATCH /cats/{id} // Update a cat's status.
  Request
    {
      "status": "relaxing" // New status of the cat.
    }
  200 any    // Ok.
  409 @error // Some error.
  404 empty  // A cat is not found.

DELETE /cats/{id} // Delete a cat.

#----------------- /cats/{id}/friends/{friendId} ---------

GET /cats/{id}/friends/{friendId} // Get cats friend.
  Path
  {
    "friendId": @petId // Friend's id.
  }

  200 // Return the cats friend.
    @cat | @pig // The cat's friend (cat or pig).

#======================= /dogs =======================

GET /dogs // Get the paged list of all dogs.
  Query "page=1&pageSize=30&filter[age]=12"
    {                // {allOf: "@pageQuery"}
      "filter": {    // {optional: true}
        "size": "S", /* {optional: true, enum: ["S", "L", "M"]} 
                        - Filter by dog's size. */
        "age" : 12   /* {optional: true, min: 0               } 
                        - Filter by dog's age. */
      }
    }
  Request
    Headers
      @commonRequestHeaders
    Body empty
  200 // Returns a page of dogs.
    Headers
      @commonResponseHeaders
    Body
      {
        "items": [@dog],
        "page" : 1,      
        "pageSize": 30   
      }
  PASTE @errorResponses

POST /dogs // Create a new dog.
  Description
  (
    ### Limitations
    
    - Accounts are limited to 25 new dogs 
      within a 24 hour period.
  )
  Request
    Headers
      { // {allOf: ["@commonRequestHeaders"]}
        "X-header": "Some additional header"
      }
    Body
      @dog
  200 // Success.
    Headers
      {
        "X-header": "Some additional header"
      }
    Body regex
      /^OK$/
  PASTE @errorResponses

#------------------- /dogs/{id} ---------------------
URL /dogs/{id}
  Path
    {
      "id": "DOG-123" // {type: "@petId"} - Dog's id.
    }

GET /dogs/{id} // Get a dog by its id.
  Request
    Headers
      @commonRequestHeaders
    Body empty
  200          // Return a dog.
    Headers
      @commonResponseHeaders
    Body
      @dog     
  PASTE @errorResponses

PUT /dogs/{id} // Update a dog.
  Request
    Headers
      @commonRequestHeaders
    Body 
      @dog
  200          // Success.
    Headers
      @commonResponseHeaders
    Body any
  PASTE @errorResponses

DELETE /dogs/{id} // Delete a dog.
  Request
    Headers
      @commonRequestHeaders
    Body empty
  200          // OK.
    Headers
      @commonResponseHeaders
    Body
      "OK" // {const: true}
  PASTE @errorResponses

#====================== PIGS ========================

URL /pigs
  GET              // Get the list of all pigs.
    200 [@pig]     // List of pigs.
  POST             // Create a new pig.
    Request @pig
    200 @pig       // Created pig.
    409 @error     // Pig is not created.

URL /pigs/{id}
  Path
    {
      "id": "PIG-123" // {type: "@petId"} - A pigs id.
    }
  GET                 // Get a pig by its id.
    200 @pig          // A pig.
    404 @error        // Pig not found.
  PUT                 // Change a pig by its id.
    Request @pig      
    200 @pig          // An updated pig.
    404 @error        // Pig not found.
    409 @error        // Error.
  DELETE              // Delete a pig by its id.
    200 empty         // Success.
    404 @error        // Pig not found.
    409 @error        // Error.

#====================== TYPES ========================

TYPE @pet // A pet.
{
  "id"        : @petId,
  "name"      : "Tom",
  "type"      : "PIG", // {enum: ["CAT", "DOG", "PIG"]}
  "age"       : 10,    // {min: 0, max: 99}
  "email"     : "[email protected]",        // {type: "email"}
  "uri"       : "http://tom.pets.com", // {type: "uri"}
  "birthday"  : "2012-01-03",          // {type: "date"}
  "uuid"      : "550e8400-e29b-41d4-a716-446655440000" // {type: "uuid"}
}

TYPE @cat // A cat.
{ // {allOf: "@pet"}
  "status": "relaxing",
  "bestFriend": @cat,
  "topFriends": { // {additionalProperties: true}
    @petName: @cat | @pig
  },
  "topEnemies": [ // {maxItems: 10}
    @dog
  ]
}

TYPE @dog // A dog.
{ // {allOf: "@pet"}
  "friendIds": [ // Only dog ids are allowed.
    @petId
  ],
  "isDangerous": false,
  "legacyId": 1, /* {or: [
                        {type: "integer", min: 0, exclusiveMinimum: true}, 
                        {type: "string"}
                      ], 
                      optional: true
                    } */
  "additionalData": {} // {type: "any"} - Field for legacy.
}

TYPE @pig // A pig.
{ // {allOf: "@pet"}
  "temperature" : 35.6, // {precision: 1, nullable: true}
  "pigSize"     : "S",  // {type: "@pigSize"}
  "lastWashTime": "2021-01-02T15:04:05+03:00", // {type: "datetime"}
  "additionalData": {  // {additionalProperties: "string"}
    "key": "value"
  }
}

TYPE @pigSize
  "S" /* {enum:[
            "XXS",
            "XS",
            "S",
            "M",
            "L",
            "XL",
            "XXL"
          ]} */

TYPE @petId 
  "GOAT-12345" // {regex: "^[A-Z]+-\\d+$", minLength: 3, maxLength: 255}

TYPE @petName regex
  /^[A-Z][a-z]*( [A-Z][a-z]*)*$/

#-------------------- COMMON TYPES -------------------

TYPE @error // A common error response.
{
  "code": 12,
  "message": "Something bad had happened on server..."
}

TYPE @commonRequestHeaders
{ // {allOf: ["@contentTypeHeader", "@authHeader"]}
}

TYPE @commonResponseHeaders
{ // {allOf: ["@contentTypeHeader"]}
}

TYPE @contentTypeHeader
{
  "Content-Type": "application/json" // {const: true}
}

TYPE @authHeader // Authorization header.
{
  "Authorization": "Basic dG9tQGNhdC5jb206YWJjMTIz=" /* 
                        {regex: "^Basic [A-Za-z0-9+\\/=]+$"} */
}

TYPE @pageQuery
{
  "page"    : 1, // {optional: true, min: 1} - 1 by default.
  "pageSize": 30 // {optional: true, min: 10, max: 100} - 30 by default.
}

#----------------------- MACROS -----------------------------------

MACRO @errorResponses
(
  401 any      // Unauthorised.
  404 empty    // Not found.
  409 @error   // Some error.
)

We did not describe this API in OpenAPI. It is too complicated and very long…

⭐ Star us on GitHub — it motivates us a lot!

📖 Features

Description of your REST API in a very simple and intuitive JSight API language.
Convenient syntax highlighting.
Instant automatic document generation.
Intuitive document navigation.
View data schemas in two formats: in the form of an example (Code View) and in a tabular form (Table View).
Expand nested data types on click.
The document can be downloaded in HTML format.
Document preview before downloading.
Sharing an API document by link.

📅 Roadmap

Aug – Dec 2022
Minor UI improvements.
Aug 2022
JSON-RPC 2.0 support.
Sep 2022
Download document also in MarkDown, PDF, and DOCX formats.
Oct 2022
Quick Help built into the editor allows you to quickly access the necessary information on the JSight API language without leaving the editor.
Nov 2022
Converting the JSight specification to OpenAPI and vice versa.
Sep 2022
Converting the JSight specification to OpenAPI and vice versa. Automatic generation of API clients and API server stubs.
Aug – Dec 2022
Support for other types of API: gRPC, Kafka, RabbitMQ, WebSocket. Sending test requests to the API.
Nov 2022
Create a virtual server on click.

If you have any ideas or suggestions, please write to us:

Email: [email protected]
Telegram: @jsight_support

📋 Configuration

Local startup configuration

Backend configuration

When starting jsight-server-docker-compose.yml you can specify the following parameters:

SERVER_HOST_PORT — port at which JSight Server will run.
JSIGHT_SERVER_CORS — If true, the server enables CORS headers, allowing Cross Origin requests to JSight Server. If false, CORS-headers are not sent, Cross Origin requests to JSight Server are forbidden.
JSIGHT_SERVER_STATISTICS — If true, then JSight Server will send statistical data to the statistics collection server. If false, statistics are not sent. ⚠️ Do not turn on this mode unnecessarily!

Default parameter values:

JSIGHT_SERVER_CORS=true,
JSIGHT_SERVER_STATISTICS=false.

An example of starting JSight Server with the configured parameters:

SERVER_HOST_PORT=8080 JSIGHT_SERVER_CORS=false JSIGHT_SERVER_STATISTICS=false docker-compose -f jsight-server-docker-compose.yml up -d

Frontend configuration

The default frontend application configuration is in the file .env.

It allows you to configure the following settings:

REACT_APP_API_URL — JSight Server URL address (absolute or relative). This is a mandatory parameter.
REACT_APP_GTM_ID — Google Tag Manager identificator. You can leave this parameter blank.
REACT_APP_CLOUD_URL — JSight Cloud URL address (absolute or relative). You can leave this parameter blank.

If you need to change the default configuration, create a file .env.local in the same folder, copy the contents of the file .env into it, and change the settings as follows, for example:

REACT_APP_API_URL=https://my-domain.com/jsight-server-api
REACT_APP_GTM_ID=
REACT_APP_CLOUD_URL=

or

REACT_APP_API_URL=/jsight-server-api
REACT_APP_GTM_ID=
REACT_APP_CLOUD_URL=

More information on environment variables can be found at: https://create-react-app.dev/docs/adding-custom-environment-variables/ .

Startup configuration from a Docker image

When starting docker-compose.yml you can specify the following parameters:

FE_HOST_PORT — port at which JSight Online Editor will run.
SERVER_HOST_PORT — port at which JSight Server will run.
JSIGHT_SERVER_CORS — If true, the server enables CORS headers, allowing Cross Origin requests to JSight Server. If false, CORS-headers are not sent, Cross Origin requests to JSight Server are forbidden.
JSIGHT_SERVER_STATISTICS — If true, then JSight Server will send statistical data to the statistics collection server. If false, statistics are not sent. ⚠️ Do not turn on this mode unnecessarily!

Default parameter values:

JSIGHT_SERVER_CORS=true,
JSIGHT_SERVER_STATISTICS=false.

An example of starting JSight Online Editor with the configured parameters:

FE_HOST_PORT=80 SERVER_HOST_PORT=8080 JSIGHT_SERVER_CORS=true JSIGHT_SERVER_STATISTICS=true docker-compose -f docker-compose.yml up -d --build

📑 Versioning

The JSight Online Editor frontend version consists of two numbers:

{release number}.{release fix number}

For example, version 3.2 means it's release number 3, fix number 2.

Releases are located in the branch main and are tagged with a version number, for example release-2.0.

The release history of JSight Online Editor can be found here: https://github.com/jsightapi/online-editor-frontend/releases.

The release history is also available on the official website.

📔 Dependencies

JSight Online Editor Frontend depends on the backend API provided by JSight Server.

The JSight Server API specification can be found here: https://github.com/jsightapi/jsight-server/blob/main/jsight/jsight-server-api.jst.

The specific versions of the JSight Server API that JSight Online Editor Frontend depends on are listed on the release pages: https://github.com/jsightapi/online-editor-frontend/releases.

📐 General Architecture

Links to the components:

JSight Server API specification: https://github.com/jsightapi/jsight-server/blob/main/jsight/jsight-server-api.jst.
JSight Server repo: https://github.com/jsightapi/jsight-server.
JSight API Go Library repo: https://github.com/jsightapi/jsight-api-go-library.
JSight Schema Go Library repo: https://github.com/jsightapi/jsight-schema-go-library.

🧪 Testing

The manual tests are available here: tests/manual-tests/.

😎 Contributing

Contributing is more than just coding. You can help the project in many ways, and we will be very happy to accept your contribution to our project.

Details of how you can help the project are described in the CONTRIBUTING.md document.

Contributors

💬 Bugs and Feature Requests

Do you have a bug report or a feature request?

Please feel free to add a new issue or write to us in support:

Email: [email protected]
Telegram: @jsight_support

❔ Support

If something is unclear to you, please contact support; we try to respond within 24 hours. Moreover, it is critical for us to understand what is unclear from the first instance.

Email: [email protected]
Telegram: @jsight_support

🧾 License

This project is licensed under the Apache 2.0 License. See the LICENSE file for more details.

📖 Resources

JSight Online Editor: https://editor.jsight.io.
JSight Official Website: https://jsight.io.

🤝 Partners

We have successfully completed class #29 of the Alchemist Accelerator.

🏆 Acknowledgments

We sincerely thank all those without whom this project would not have been possible:

⭐ Star us on GitHub — it motivates us a lot! ⭐

Name		Name	Last commit message	Last commit date
Latest commit History 253 Commits
.circleci		.circleci
docs		docs
img		img
nginx		nginx
public		public
scripts		scripts
src		src
tests/manual-tests		tests/manual-tests
.dockerignore		.dockerignore
.env		.env
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierrc.js		.prettierrc.js
CONTRIBUTING.md		CONTRIBUTING.md
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
config-overrides.js		config-overrides.js
docker-compose.yml		docker-compose.yml
jsight-server-docker-compose.yml		jsight-server-docker-compose.yml
json.js		json.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tsconfig.json		tsconfig.json

License

asheshgoplani/online-editor-frontend

Folders and files

Latest commit

History

Repository files navigation

JSight Online Editor (Frontend)

🐣 Quick Start

📖 Table of Contents

🚀 Getting Started

Browser Support

Installing

Prerequisites

Installing

Prerequisites

Installing

📜 JSight API language

📖 Features

📅 Roadmap

📋 Configuration

Local startup configuration

Backend configuration

Frontend configuration

Startup configuration from a Docker image

📑 Versioning

📔 Dependencies

📐 General Architecture

🧪 Testing

😎 Contributing

Contributors

💬 Bugs and Feature Requests

❔ Support

🧾 License

📖 Resources

Documentation

Publications

Others

🤝 Partners

🏆 Acknowledgments

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages