Repolode
Enviar
josdejong

josdejong/jsoneditor

Componente web para visualizar e editar JSON nos modos árvore, código, texto e visualização, integrado ao seu próprio app web.

Ver no GitHub
Estrelas
12,268
Forks
2,073
Issues abertas
256
Último commit
há 6 dias

O que é?

O JSON Editor permite visualizar, editar, formatar e validar JSON no navegador. Ele oferece vários modos: um editor em árvore para alterar campos e valores visualmente, um editor de código com realce de sintaxe, um editor de texto simples e um modo de visualização para documentos grandes de até 500 MiB.

O modo árvore permite adicionar, mover, duplicar e ordenar nós, fazer transformações com JMESPath, pesquisar e desfazer/refazer ações. Em todos os modos, há validação de JSON Schema com ajv, além de formatação, compactação e reparo de JSON malformado.

O editor é distribuído como uma biblioteca que pode ser incorporada ao seu próprio aplicativo web. Ele pode ser carregado como módulo CommonJS, módulo AMD ou script simples, e instalado via npm ou CDN.

Recursos principais

  • 01Modo árvore para editar, mover, duplicar e ordenar campos e valores.
  • 02Modo de código com realce de sintaxe, formatação e compactação.
  • 03Modo de visualização para lidar com documentos JSON de até 500 MiB.
  • 04Validação de JSON Schema com ajv em todos os modos.
  • 05Consultas JMESPath para transformar dados JSON.
  • 06Reparo de JSON malformado.

Casos de uso

  • Incorporar um editor de JSON em um painel administrativo web ou ferramenta de configuração.
  • Inspecionar e corrigir respostas de API ou arquivos de configuração no navegador.
  • Validar JSON com base em um schema antes de salvar dados enviados por usuários.
  • Visualizar arquivos JSON grandes usando o modo de visualização.

Início rápido

  1. 1

    Instale a biblioteca com npm

    npm install jsoneditor
  2. 2

    Inclua os arquivos CSS e JS na sua página HTML e crie um editor dentro de um elemento contêiner

Antes de usar

  • O README informa que svelte-jsoneditor é o sucessor e que o novo editor não é um substituto idêntico.

Tópicos

#json#editor#json-schema#web-component#tree-view#validation

Perguntas frequentes

O que é jsoneditor?
Componente web para visualizar e editar JSON nos modos árvore, código, texto e visualização, integrado ao seu próprio app web. O JSON Editor permite visualizar, editar, formatar e validar JSON no navegador. Ele oferece vários modos: um editor em árvore para alterar campos e valores visualmente, um editor de código com realce de sintaxe, um editor de texto simples e um modo de visualização para documentos grandes de até 500 MiB.
jsoneditor é gratuito? Qual é a licença?
jsoneditor é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
jsoneditor ainda é mantido?
Manutenção ativa. O último commit de jsoneditor foi em 1 de nov. de 2026.
Para que posso usar jsoneditor?
Incorporar um editor de JSON em um painel administrativo web ou ferramenta de configuração. Inspecionar e corrigir respostas de API ou arquivos de configuração no navegador. Validar JSON com base em um schema antes de salvar dados enviados por usuários. Visualizar arquivos JSON grandes usando o modo de visualização.
Como instalar jsoneditor?
Instale a biblioteca com npm: npm install jsoneditor Inclua os arquivos CSS e JS na sua página HTML e crie um editor dentro de um elemento contêiner
Onde consigo jsoneditor?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/josdejong/jsoneditor

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados