isekai
Un punto de partida para lo que sigue

Bienvenido a bordo

Tu primera página. Tu primera conexión al backend. Una base que puedes hacer tuya.

Explora la plataforma
Una referencia funcional
Un navegador de plastilina conectado a un backend de traducción, con burbujas de mensajes en varios idiomas.
Desplázate para explorar
01 /

Una página. Una conexión real.

Tus servicios, listos para explorar.

Esta página ya solicitó su título, descripción y acción al servicio de i18n. Sigue el mismo flujo al crear tu propia interfaz.

El sitio valida las identidades de las traducciones antes de generar el HTML. Si la dependencia falla, la solicitud muestra el error.

REQUEST / RESPONSE

  1. Navegador

    Web Components nativos

    HTML + JS

  2. Sitio web

    HTML y una API del mismo origen

    HTTP

  3. Backend de i18n

    Mensajes traducidos

    JSON
title · description · action
CUSTOM ELEMENTS / NATIVE JS
<isekai-navigation>

Enlaces adaptables y acceso por teclado

<isekai-locale-choice>

Un selector de idioma nativo

<isekai-translation-preview>

Una solicitud explícita al backend

connectedCallback()disconnectedCallback()
02 /

Piezas pequeñas. Espacio para crear.

Empieza con HTML y JavaScript. Cada elemento interactivo es una clase con su propio ciclo de vida, para que puedas entenderlo, modificarlo y reutilizarlo.

Primero el HTML

La página y los enlaces de idioma funcionan antes de cargar JavaScript. Los componentes añaden interacción al contenido existente.

03 / Mira la respuesta

Sigue el mensaje.

Estos valores llegaron del backend al generar la página. Recárgalos para ver el endpoint JSON del mismo origen en acción.

GET/api/messagesEndpoint del sitio
Respuesta de traducciónEspañol
{
  "locale": "es",
  "messages": {
    "title": "Bienvenido a bordo",
    "description": "Tus servicios, listos para explorar.",
    "action": "Explora la plataforma"
  }
}

Generado con el backend de i18n. Recarga para hacer otra solicitud.

Este ejemplo usa el idioma de la página. Elige otro idioma al pie de la página para comparar.

Hazlo tu punto de partida.

Explora la integración con esta página y adapta el código a tu producto. El sitio y la referencia de i18n están disponibles bajo la licencia MIT.

Explora los componentes