\n\n\n```\n\n \n \n\nTo use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

{$content.myFile}

\n

\n```\n\n \n \n\nTo use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myFile}

\n

\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst FileComponent: Component = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myFile}

\n

\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-file\",\n template: `\n

\n

{{ content().myFile }}

\n

\n `,\n})\nexport class FileComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"my_key\").onChange((newContent) => {\n document.getElementById(\"file-content\")!.textContent = newContent.myFile;\n});\n\n// Initial render\ndocument.getElementById(\"file-content\")!.textContent = content.myFile;\n```\n\n \n\n## Setting Up File Content\n\nTo embed file content in your Intlayer project, use the `file` function in a content module. Below are examples demonstrating different implementations.\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { file, type Dictionary } from \"intlayer\";\n\nconst myFileContent = {\n key: \"my_key\",\n content: {\n myFile: file(\"./path/to/file.txt\"),\n },\n} satisfies Dictionary;\n\nexport default myFileContent;\n```\n\n```json5 fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"my_key\",\n \"content\": {\n \"myFile\": {\n \"nodeType\": \"file\",\n \"value\": \"./path/to/file.txt\",\n },\n },\n}\n```\n\n## Using File Content in React Intlayer\n\n\n \n\nTo use embedded file content in a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This retrieves the content from the specified key and allows it to be displayed dynamically.\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myFile}

\n

\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\n\"use client\";\n\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"next-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myFile}

\n

\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```vue fileName=\"**/*.vue\"\n\n\n\n```\n\n \n \n\nTo use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

{$content.myFile}

\n

\n```\n\n \n \n\nTo use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myFile}

\n

\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst FileComponent: Component = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myFile}

\n

\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-file\",\n template: `\n

\n

{{ content().myFile }}

\n

\n `,\n})\nexport class FileComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"my_key\").onChange((newContent) => {\n document.getElementById(\"file-content\")!.textContent = newContent.myFile;\n});\n\n// Initial render\ndocument.getElementById(\"file-content\")!.textContent = content.myFile;\n```\n\n \n\n\n## Multilingual Markdown Example\n\nTo support multilingual editable Markdown files, you can use `file` in combination with `t()` and `md()` to define different language versions of a Markdown content file.\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { file, t, md, type Dictionary } from \"intlayer\";\n\nconst myMultilingualContent = {\n key: \"my_multilingual_key\",\n content: {\n myContent: md(\n t({\n \"en-GB\": file(\"src/components/test.en.md\"),\n fr: file(\"src/components/test.fr.md\"),\n es: file(\"src/components/test.es.md\"),\n })\n ),\n },\n} satisfies Dictionary;\n\nexport default myMultilingualContent;\n```\n\nThis setup allows the content to be dynamically retrieved based on the user's language preference. When used in the Intlayer Visual Editor or CMS, the system will recognise that the content comes from the specified Markdown files and ensure they remain editable.\n\n## How Intlayer Handles File Content\n\nThe `file` function is based on Node.js' `fs` module to read the content of the specified file and insert it into the dictionary. When used in conjunction with the Intlayer Visual Editor or CMS, Intlayer can track the relationship between the dictionary and the file. This allows Intlayer to:\n\n- Recognise that the content originates from a specific file.\n- Automatically update the dictionary content when the linked file is edited.\n- Ensure synchronisation between the file and the dictionary, preserving the integrity of the content.\n\n## Additional Resources\n\nFor more details on configuring and using file embedding in Intlayer, refer to the following resources:\n\n- [Intlayer CLI Documentation](/en-GB/doc/concept/cli)\n- [React Intlayer Documentation](/en-GB/doc/environment/create-react-app)\n- [Next Intlayer Documentation](/en-GB/doc/environment/nextjs/15)\n- [Markdown Content Documentation](/en-GB/doc/concept/content/markdown)\n- [Translation Content Documentation](/en-GB/doc/concept/content/translation)\n\nThese resources provide further insights into file embedding, content management, and Intlayer’s integration with various frameworks.\n","description":"Learn how to embed external files into your content dictionary using the `file` function. This documentation explains how Intlayer links and manages file content dynamically.","url":"https://intlayer.org/en-GB/doc/concept/content/file","datePublished":"2025-03-13","dateModified":"2025-06-29","version":"5.5.10","keywords":"File, Internationalisation, Documentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Developers, Content Managers"}}

Author:

Creation:2025-03-13Last update:2025-06-29

Reference this doc to your favorite AI assistantChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

Version History

"Initial history"
v5.5.1029/06/2025

The content of this page was translated using an AI.

See the last version of the original content in English

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

File Content / Embedding Files in Intlayer

How File Embedding Works

To use embedded file content in a React component, import and use the useIntlayer hook from the react-intlayer package. This retrieves the content from the specified key and allows it to be displayed dynamically.

**/*.tsx

Copy code

Copy the code to the clipboard

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copy code

Copy the code to the clipboard

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Copy code

Copy the code to the clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myFile } = useIntlayer("my_key");</script><template><div>  <pre>{{ myFile }}</pre></div></template>

To use embedded file content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Copy code

Copy the code to the clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><pre>{$content.myFile}</pre></div>

To use embedded file content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copy code

Copy the code to the clipboard

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copy code

Copy the code to the clipboard

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const FileComponent: Component = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Copy code

Copy the code to the clipboard

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-file",template: `  <div>    <pre>{{ content().myFile }}</pre>  </div>`,})export class FileComponent {content = useIntlayer("my_key");}

To use embedded file content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Copy code

Copy the code to the clipboard

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("file-content")!.textContent = newContent.myFile;
});

// Initial render
document.getElementById("file-content")!.textContent = content.myFile;

Setting Up File Content

To embed file content in your Intlayer project, use the file function in a content module. Below are examples demonstrating different implementations.

**/*.content.ts

Copy code

Copy the code to the clipboard

import { file, type Dictionary } from "intlayer";

const myFileContent = {
  key: "my_key",
  content: {
    myFile: file("./path/to/file.txt"),
  },
} satisfies Dictionary;

export default myFileContent;

Using File Content in React Intlayer

To use embedded file content in a React component, import and use the useIntlayer hook from the react-intlayer package. This retrieves the content from the specified key and allows it to be displayed dynamically.

**/*.tsx

Copy code

Copy the code to the clipboard

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copy code

Copy the code to the clipboard

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Copy code

Copy the code to the clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myFile } = useIntlayer("my_key");</script><template><div>  <pre>{{ myFile }}</pre></div></template>

To use embedded file content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Copy code

Copy the code to the clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><pre>{$content.myFile}</pre></div>

To use embedded file content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copy code

Copy the code to the clipboard

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copy code

Copy the code to the clipboard

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const FileComponent: Component = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Copy code

Copy the code to the clipboard

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-file",template: `  <div>    <pre>{{ content().myFile }}</pre>  </div>`,})export class FileComponent {content = useIntlayer("my_key");}

To use embedded file content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Copy code

Copy the code to the clipboard

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("file-content")!.textContent = newContent.myFile;
});

// Initial render
document.getElementById("file-content")!.textContent = content.myFile;

Multilingual Markdown Example

To support multilingual editable Markdown files, you can use file in combination with t() and md() to define different language versions of a Markdown content file.

**/*.content.ts

Copy code

Copy the code to the clipboard

import { file, t, md, type Dictionary } from "intlayer";

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        "en-GB": file("src/components/test.en.md"),
        fr: file("src/components/test.fr.md"),
        es: file("src/components/test.es.md"),
      })
    ),
  },
} satisfies Dictionary;

export default myMultilingualContent;

This setup allows the content to be dynamically retrieved based on the user's language preference. When used in the Intlayer Visual Editor or CMS, the system will recognise that the content comes from the specified Markdown files and ensure they remain editable.

How Intlayer Handles File Content

The file function is based on Node.js' fs module to read the content of the specified file and insert it into the dictionary. When used in conjunction with the Intlayer Visual Editor or CMS, Intlayer can track the relationship between the dictionary and the file. This allows Intlayer to:

Recognise that the content originates from a specific file.
Automatically update the dictionary content when the linked file is edited.
Ensure synchronisation between the file and the dictionary, preserving the integrity of the content.

Additional Resources

For more details on configuring and using file embedding in Intlayer, refer to the following resources:

These resources provide further insights into file embedding, content management, and Intlayer’s integration with various frameworks.

Insertion Nesting