Penulis:
    Aymeric PINEAU
    Dibuat:2026-01-20Terakhir diperbarui:2026-01-22

    Konten HTML / HTML di Intlayer

    Intlayer mendukung konten HTML, memungkinkan Anda menyematkan konten yang kaya dan terstruktur dalam dictionaries Anda. Konten ini dapat dirender dengan tag HTML standar atau digantikan dengan komponen kustom saat runtime.

    Mendeklarasikan Konten HTML

    Anda dapat menyatakan konten HTML menggunakan fungsi html atau cukup sebagai string.

    Gunakan fungsi html untuk secara eksplisit menyatakan konten HTML. Ini memastikan tag standar dipetakan dengan benar bahkan jika deteksi otomatis dinonaktifkan.

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // dapat diatur di file konfigurasi
content: {
  myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    Jika string berisi tag HTML umum (misalnya, <p>, <div>, <strong>, dll.), Intlayer akan secara otomatis mengubahnya.

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // dapat diatur di file konfigurasi
content: {
  myHtmlContent:  "<p>Hello <strong>World</strong></p>",
},
};

    Impor konten HTML dari file. Perhatikan bahwa saat ini fungsi file() mengembalikan sebuah string, yang akan terdeteksi otomatis sebagai HTML jika mengandung tag.

    htmlDictionary.content.ts
    import { html, file, t } from "intlayer";

export default {
key: "app",
content: {
  content: t({
    en: html(file("./content.en.html")),
    fr: html(file("./content.fr.html")),
  }),
},
};

    Node html()

    Fungsi html() adalah fitur baru di Intlayer v8 yang memungkinkan Anda menentukan konten HTML secara eksplisit di kamus Anda. Meskipun Intlayer sering kali dapat mendeteksi konten HTML secara otomatis, penggunaan fungsi html() memberikan beberapa keuntungan:

    • Keamanan Tipe: Fungsi html() memungkinkan Anda menentukan props yang diharapkan untuk komponen kustom, memberikan pelengkapan otomatis dan pemeriksaan tipe yang lebih baik di editor Anda.
    • Deklarasi Eksplisit: Ini memastikan bahwa string selalu diperlakukan sebagai HTML, bahkan jika string tersebut tidak berisi tag HTML standar yang akan memicu deteksi otomatis.
    • Definisi Komponen Kustom: Anda dapat memberikan argumen kedua ke html() untuk menentukan komponen kustom dan tipe prop yang diharapkan.
    typescript
    import { html } from "intlayer";

const myContent = html(
  "<MyCustomComponent title='Halo'>Dunia</MyCustomComponent>",
  {
    MyCustomComponent: {
      title: "string",
      children: "node",
    },
  }
);

    Saat menggunakan metode .use() pada node HTML, komponen yang Anda berikan akan diperiksa terhadap definisi yang diberikan dalam fungsi html() (jika tersedia).

    Merender HTML

    Proses merender dapat ditangani secara otomatis oleh sistem konten Intlayer atau secara manual menggunakan alat khusus.

    Perenderan Otomatis (menggunakan useIntlayer)

    Saat Anda mengakses konten melalui useIntlayer, node HTML sudah disiapkan untuk dirender.

    Node HTML dapat dirender langsung sebagai JSX. Tag standar bekerja secara otomatis.

    App.tsx
    import { useIntlayer } from "react-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Gunakan metode .use() untuk menyediakan komponen kustom atau menimpa tag:

    tsx
    {myHtmlContent.use({
p: (props) => <p className="prose" {...props} />,
CustomLink: ({ children }) => <a href="/details">{children}</a>,
})}

    Di Vue, konten HTML dapat dirender menggunakan built-in component.

    App.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const { myHtmlContent } = useIntlayer("app");
</script>

<template>
<component :is="myHtmlContent" />
</template>

    Gunakan .use() untuk override:

    vue
    <component :is="myHtmlContent.use({ h1: 'h2' })" />

    Svelte merender node HTML sebagai string. Gunakan {@html} untuk merendernya.

    svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("app");
</script>

{@html $content.myHtmlContent}

    Preact mendukung node HTML secara langsung di JSX.

    App.tsx
    import { useIntlayer } from "preact-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Solid mendukung node HTML secara langsung di JSX.

    App.tsx
    import { useIntlayer } from "solid-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Angular menggunakan direktif [innerHTML] untuk merender konten HTML.

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-root",
template: `<div [innerHTML]="content().myHtmlContent"></div>`,
})
export class AppComponent {
content = useIntlayer("app");
}

    Gunakan metode .use() untuk menyediakan komponen kustom atau menimpa tag:

    typescript
    content().myHtmlContent.use({
p: { class: "prose" },
CustomLink: { href: "/details" },
})

    Konfigurasi Global dengan HTMLProvider

    Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi Anda. Ini ideal untuk mendefinisikan komponen kustom yang harus tersedia di semua konten HTML.

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
    CustomLink: ({ children }) => <a href="/details">{children}</a>,
  }}
>
  {children}
</HTMLProvider>
);

    Anda juga dapat menggunakan renderer HTML Anda sendiri:

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('react-intlayer/html');
    return renderHTML(html);
  }}
>
  {children}
</HTMLProvider>
);
    Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
    main.ts
    import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
components: {
  p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
  CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),
},
});

app.mount("#app");

    Anda juga dapat menggunakan renderer HTML Anda sendiri:

    main.ts
    import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
renderHTML: async (html) => {
  const { renderHTML } = await import('vue-intlayer/html');
  return renderHTML(html);
},
});

app.mount("#app");
    Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

<HTMLProvider
components={{
  p: MyCustomP,
}}
>
<slot />
</HTMLProvider>

    Anda juga dapat menggunakan renderer HTML Anda sendiri:

    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
</script>

<HTMLProvider
renderHTML={async (html) => {
  const { renderHTML } = await import('svelte-intlayer/html');
  return renderHTML(html);
}}
>
<slot />
</HTMLProvider>
    Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {children}
</HTMLProvider>
);

    Anda juga dapat menggunakan renderer HTML Anda sendiri:

    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('preact-intlayer/html');
    return renderHTML(html);
  }}
>
  {children}
</HTMLProvider>
);
    Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

export const AppProvider = (props) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {props.children}
</HTMLProvider>
);

    Anda juga dapat menggunakan renderer HTML Anda sendiri:

    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

export const AppProvider = (props) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('solid-intlayer/html');
    return renderHTML(html);
  }}
>
  {props.children}
</HTMLProvider>
);
    Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    components: {
      p: { class: "prose" },
      CustomLink: { href: "/details" },
    },
  }),
],
};

    Anda juga dapat menggunakan renderer HTML Anda sendiri:

    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    renderHTML: async (html) => {
      const { renderHTML } = await import('angular-intlayer/html');
      return renderHTML(html);
    },
  }),
],
};
    Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.

    Merender Manual & Alat Lanjutan

    Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pemetaan komponen, gunakan alat berikut.

    Komponen <HTMLRenderer />

    Merender string HTML dengan komponen tertentu.

    tsx
    import { HTMLRenderer } from "react-intlayer/html";

<HTMLRenderer components={{ p: MyCustomP }}>
{"<p>Hello World</p>"}
</HTMLRenderer>

    useHTMLRenderer() Hook

    Dapatkan fungsi renderer yang telah dikonfigurasi sebelumnya.

    tsx
    import { useHTMLRenderer } from "react-intlayer/html";

const renderHTML = useHTMLRenderer({
components: { strong: (props) => <strong {...props} className="text-red-500" /> }
});

return renderHTML("<p>Hello <strong>World</strong></p>");

    Utilitas renderHTML()

    Utilitas mandiri untuk merender di luar komponen.

    tsx
    import { renderHTML } from "react-intlayer/html";

const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

    Komponen <HTMLRenderer />

    vue
    <script setup>
import { HTMLRenderer } from "vue-intlayer/html";
</script>

<template>
<HTMLRenderer content="<p>Hello World</p>" />
</template>

    Komponen <HTMLRenderer />

    svelte
    <script lang="ts">
import { HTMLRenderer } from "svelte-intlayer/html";
</script>

<HTMLRenderer value="<p>Hello World</p>" />

    useHTMLRenderer() Hook

    svelte
    <script lang="ts">
import { useHTMLRenderer } from "svelte-intlayer/html";
const render = useHTMLRenderer();
</script>

{@html render("<p>Hello World</p>")}

    Utilitas renderHTML()

    svelte
    <script lang="ts">
import { renderHTML } from "svelte-intlayer/html";
</script>

{@html renderHTML("<p>Hello World</p>")}

    Komponen <HTMLRenderer />

    tsx
    import { HTMLRenderer } from "preact-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    useHTMLRenderer() Hook

    tsx
    import { useHTMLRenderer } from "preact-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    Utilitas renderHTML()

    tsx
    import { renderHTML } from "preact-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

    Komponen <HTMLRenderer />

    tsx
    import { HTMLRenderer } from "solid-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    useHTMLRenderer() Hook

    tsx
    import { useHTMLRenderer } from "solid-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    Utilitas renderHTML()

    tsx
    import { renderHTML } from "solid-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

    Layanan IntlayerHTMLService

    Render string HTML menggunakan layanan tersebut.

    typescript
    import { IntlayerHTMLService } from "angular-intlayer/html";

export class MyComponent {
constructor(private markdownService: IntlayerHTMLService) {}

renderHTML(html: string) {
  return this.markdownService.renderHTML(html);
}
}

    Referensi Opsi

    Opsi-opsi ini dapat diteruskan ke HTMLProvider, HTMLRenderer, useHTMLRenderer, dan renderHTML.

    Opsi Tipe Default Deskripsi
    components Record<string, any> {} Peta dari tag HTML atau nama komponen kustom ke komponen.
    renderHTML Function null Fungsi render kustom untuk menggantikan sepenuhnya parser HTML default (Hanya untuk provider Vue/Svelte).
    Catatan: Untuk React dan Preact, tag HTML standar disediakan secara otomatis. Anda hanya perlu meneruskan prop components jika ingin menimpanya atau menambahkan komponen kustom.
    MarkdownPengambilan fungsi