शून्य निर्भरताMDX समर्थितSSR के लिए निर्मितक्रॉस-फ्रेमवर्क

    Markdown जो 5× तेज़ रेंडर होता है।

    Intlayer अपना खुद का Markdown इंजन देता है। कोई निर्भरता नहीं, MDX शामिल, सर्वर पर पार्स और React, Next.js, Vue, Svelte, Solid, Preact तथा Angular में नेटिव रेंडरिंग। अब आपको रेंडरर चुनने की ज़रूरत नहीं।

    दस्तावेज़ पढ़ेंआँकड़े देखें
    markdown-file.content.md
    ---key: my-markdown-contentdescription: My content---# My contentHere an example of markdown content

    जब front-matter फ़ील्ड locale छोड़ दिया जाता है, तो Intlayer आपके कॉन्फ़िगर किए गए डिफ़ॉल्ट लोकेल का उपयोग करता है। आप बिना किसी भाषा उपसर्ग के एक ही Markdown फ़ाइल में सामग्री रख सकते हैं।

    फ़ाइल संरचना का उदाहरण:
    content
└── markdown-file.content.md
    markdown-file.en.content.md
    ---key: my-markdown-contentdescription: My contentlocale: en---# My contentHere an example of markdown content

    front-matter फ़ील्ड locale सामग्री का लोकेल तय करता है। यह वैकल्पिक है। यदि नहीं दिया गया, तो Intlayer डिफ़ॉल्ट लोकेल का उपयोग करेगा, जो अनुवाद न होने पर फ़ॉलबैक भी बनता है।

    फ़ाइल संरचना का उदाहरण:
    content
├── markdown-file.en.content.md
├── markdown-file.fr.content.md
└── markdown-file.es.content.md
    article.content.ts
    import { md, file, t, type Dictionary } from 'intlayer';export default {  key: 'article',  content: {    body: t({      en: md(file('./article.en.md')),      fr: md(file('./article.fr.md')),    }),  },} satisfies Dictionary;

    md() और file() फ़ंक्शन का उपयोग करके TypeScript, ESM या JSON डिक्शनरी में सीधे Markdown घोषित करें और पूर्ण टाइप सुरक्षा के साथ अनुवाद जोड़ें।

    फ़ाइल संरचना का उदाहरण:
    content
├── article.content.ts
├── article.en.md
└── article.fr.md
    कोई निर्भरता नहीं
    MDX कंपोनेंट
    टाइप्ड frontmatter
    अप्रयुक्त होने पर हटाया गया

    markdown-to-jsx से 5× थ्रूपुट

    पार्सर को कैश्ड रूल प्राथमिकता और इन्क्रीमेंटल lookbehind के इर्द-गिर्द फिर से लिखा गया, इसलिए दस्तावेज़ को नियम-दर-नियम दोबारा स्कैन करने के बजाय एक ही बार पढ़ा जाता है। वही Markdown, वही आउटपुट, काम का बहुत छोटा हिस्सा।

    Intlayer5×
    markdown-to-jsx1×

    सापेक्ष पार्स और रेंडर थ्रूपुट, जितना अधिक उतना बेहतर।

    0 kB

    तब भेजा जाता है जब आपका ऐप कोई Markdown नोड घोषित नहीं करता — रेंडरर बिल्ड समय पर हटा दिया जाता है।

    ~55 kB

    का पार्सर चंक Suspense के पीछे लेज़ी लोड होता है और पहले पेंट को कभी नहीं रोकता।

    0

    रनटाइम निर्भरताएँ — न कुछ ऑडिट करना है, न कुछ सिंक रखना है।

    चुनने की सूची के बजाय एक ही इंजन

    हर प्रोजेक्ट एक ही काम पर आकर रुकता है: markdown-to-jsx, marked, remark और MDX को तौलो, विजेता को जोड़ो, और फिर पता चले कि वह MDX नहीं करता, उसके टाइप ढीले हैं, या उसकी प्लगइन चेन क्लाइंट पर टूट जाती है। Intlayer यह चुनाव आपके लिए कर देता है।

    क्षमता
    Intlayer
    markdown-to-jsx
    marked
    remark / rehype
    @mdx-js
    MDX कंपोनेंट
    समर्थित
    असमर्थित
    असमर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    समर्थित
    टाइप-सुरक्षित नोड और ओवरराइड
    समर्थित
    असमर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    React और Next.js आउटपुट
    समर्थित
    समर्थित
    असमर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    समर्थित
    Vue, Svelte, Solid, Preact, Angular
    समर्थित
    असमर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    सर्वर पर पार्स, क्लाइंट पर रेंडर, दोबारा पार्स नहीं
    समर्थित
    असमर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    समर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    बिना प्लगइन चेन के कॉन्फ़िगर
    समर्थित
    समर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    असमर्थित
    असमर्थित
    टाइप्ड frontmatter मेटाडेटा
    समर्थित
    असमर्थित
    असमर्थित
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    आंशिक, या अतिरिक्त पैकेज के ज़रिए
    शून्य रनटाइम निर्भरता
    समर्थित
    समर्थित
    समर्थित
    असमर्थित
    असमर्थित
    अप्रयुक्त होने पर बंडल से हटाया गया
    समर्थित
    असमर्थित
    असमर्थित
    असमर्थित
    असमर्थित
    समर्थितआंशिक, या अतिरिक्त पैकेज के ज़रिएअसमर्थित
    • remark और rehype अधिकांश काम कर सकते हैं, पर उस प्लगइन चेन के ज़रिए जिसे आप स्वयं जोड़ते हैं, और जो ब्राउज़र तथा सर्वर पर हमेशा एक जैसा व्यवहार नहीं करती।
    • markdown-to-jsx सिर्फ़ React रेंडर करता है और marked आपको HTML स्ट्रिंग थमा देता है। Vue, Svelte, Solid या Angular के लिए कोई समकक्ष विकल्प ही नहीं है।
    • इनमें से कोई भी टाइप्ड frontmatter नहीं देता: या तो आप ऊपर एक कंटेंट लेयर चढ़ाते हैं, या मेटाडेटा खुद पार्स करते हैं।

    वही नोड, हर फ्रेमवर्क में

    Markdown नोड उस फ्रेमवर्क के नेटिव आउटपुट में बदल जाता है जहाँ वह चलता है — JSX, VNode या HTML स्ट्रिंग। Svelte, Solid और Angular पहली श्रेणी में हैं, बाद की सोच नहीं।

    Reactइस रूप में रेंडर JSX
    Next.jsइस रूप में रेंडर JSX
    Vueइस रूप में रेंडर VNode
    Nuxtइस रूप में रेंडर VNode
    Svelteइस रूप में रेंडर HTML
    Solidइस रूप में रेंडर JSX
    Preactइस रूप में रेंडर JSX
    Angularइस रूप में रेंडर HTML

    सर्वर पर पार्स करें, क्लाइंट पर रेंडर करें

    पार्सिंग और रेंडरिंग दो अलग चरण हैं। parseMarkdown सर्वर पर सीरियलाइज़ेबल AST बनाता है, ब्राउज़र उसे JSON के रूप में पाता है, और हर रेंडरर उसे ज्यों का त्यों स्वीकार करता है — दस्तावेज़ कभी दो बार नहीं पढ़ा जाता।

    सर्वर पर
    दस्तावेज़ एक ही बार पार्स होकर ऐसा JSON बनता है जिसे आप कैश, स्ट्रीम या स्टोर कर सकते हैं।
    route.server.ts
    import { parseMarkdown } from 'react-intlayer/markdown';export const loader = async () => {  // Walked once, on the server  const ast = parseMarkdown('## My title\n\nLorem Ipsum');  return Response.json({ content: ast });};
    क्लाइंट पर
    रेंडरर कच्ची स्ट्रिंग या AST दोनों लेते हैं, इसलिए ब्राउज़र सिर्फ़ चित्रित करता है।
    Page.tsx
    import { useLoaderData } from 'react-router';import { MarkdownRenderer } from 'react-intlayer/markdown';export default function Page() {  const { content } = useLoaderData();  // No re-parsing in the browser  return <MarkdownRenderer content={content} />;}

    एक बार सेट करें, नोड-दर-नोड परिष्कृत करें

    अपने कंपोनेंट provider पर घोषित करें और ऐप का हर Markdown नोड उन्हें अपना लेता है। जब किसी एक नोड को अलग होना हो, use() सिर्फ़ उसी नोड को ओवरराइड करता है — न प्लगइन चेन, न अलग बिल्ड चरण।

    वैश्विक, पूरे ऐप के लिए
    AppProvider.tsx
    import { MarkdownProvider } from 'react-intlayer/markdown';export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX component    }}  >    {children}  </MarkdownProvider>);
    स्थानीय, एक नोड के लिए
    Article.tsx
    import { useIntlayer } from 'react-intlayer';const Article = () => {  const { body } = useIntlayer('article');  // Overrides the provider, for this node only  return body.use({    h1: ({ children }) => <h1 className="text-primary">{children}</h1>,  });};

    use() provider पर भारी पड़ता है, और provider डिफ़ॉल्ट रेंडरर पर।

    टाइप्ड frontmatter, कोई कंटेंट लेयर नहीं

    Markdown फ़ाइल का frontmatter दस्तावेज़ के साथ ही पार्स होता है और नोड पर टाइप्ड मेटाडेटा ऑब्जेक्ट के रूप में उपलब्ध रहता है। जिन संपादकीय फ़ील्ड के लिए आप कंटेंट लेयर लगाते थे, वे ऑटोकम्प्लीट के साथ वहीं मौजूद हैं।

    article.en.content.md
    ---key: articlelocale: entitle: Shipping i18n Markdownauthor: aymericzip---# Shipping i18n MarkdownHere an example of markdown content.
    Article.tsx
    const { body } = useIntlayer('article');body.metadata.title; // 'Shipping i18n Markdown'body.metadata.author; // 'aymericzip'body.value; // the raw Markdown string
    वही इंजन HTML भी पार्स करता है

    html() नोड उसी पाइपलाइन से गुज़रते हैं: टैग आपके अपने कंपोनेंट से मैप होते हैं, वही टाइपिंग और वही ओवरराइड नियम।

    HTML कंटेंट देखें
    कोड-आधारित i18n

    टाइप-सुरक्षित अनुवाद जो आपके रिपो में रहते हैं।

    TypeScript या JavaScript में अपने घटकों के साथ सामग्री घोषित करें। Intlayer स्वचालित रूप से प्रकार उत्पन्न करता है, जिससे आपको स्वतः पूर्ण, सत्यापन और तत्काल प्रतिक्रिया मिलती है। कोई और गायब कुंजी या संदर्भ स्विचिंग नहीं।

    कोडिंग शुरू करें
    AI CLI Tool

    अपने टर्मिनल से अनुवाद स्वचालित करें।

    AI के साथ JSON और Markdown को ऑडिट, भरने और अनुवाद करने के लिए CLI।

    लापता कुंजियों का पता लगाने और OpenAI, Claude, या स्थानीय मॉडल का उपयोग करके अनुवाद उत्पन्न करने के लिए `npx intlayer fill` चलाएं। अपना Git इतिहास स्वच्छ रखें।

    CLI आज़माएं
    Intlayer TMS

    शब्द के अनुसार भुगतान करना बंद करें। AI के साथ स्वचालित करें।

    Crowdin और Lokalise का ओपन-सोर्स और सेल्फ-होस्टेड विकल्प। आधुनिक डेवलपर वर्कफ़्लो के लिए निर्मित।

    अपने कोड में या दृश्य संपादक के माध्यम से सीधे अनुवाद प्रबंधित करें। तुरंत अनुवाद करने के लिए AI का लाभ उठाएं। सीट सीमा के बिना अपनी टीम के साथ सहयोग करें।

    TMS देखें
    हेडलेस CMS

    अपने स्थानीय कोड को दूरस्थ सामग्री के साथ जोड़ें।

    बिना किसी ओवरहेड के बहुभाषी सामग्री प्रबंधित करें। Intlayer आपको दूरस्थ प्रबंधन के साथ स्थानीय शब्दकोशों को जोड़ने की अनुमति देता है, जिससे पुनर्निर्माण के बिना हॉट अपडेट के लिए Live Sync सक्षम होता है। CI/CD के लिए वेबहुक का उपयोग करें और ऑटो-ट्रांसलेशन AI को बाकी काम करने दें।

    CMS देखें
    फ़ीचर फ्लैग्स

    सुविधाओं को तुरंत टॉगल करें। कोई परिनियोजन आवश्यक नहीं है।

    Intlayer शब्दकोश केवल पाठ से अधिक हैं। तर्क, शैली और कॉन्फ़िगरेशन घोषित करने के लिए उनका उपयोग करें। Live Sync के साथ, आप सुविधाओं को चालू या बंद कर सकते हैं, UI थीम बदल सकते हैं, और CMS से सीधे वास्तविक समय में ऐप व्यवहार अपडेट कर सकते हैं।

    सुविधाएँ आज़माएं
    A/B टेस्टिंग

    उत्पाद प्रयोगों के लिए आपका खेल का मैदान।

    Intlayer के नए AI-संचालित A/B टेस्टिंग बीटा का पता लगाने वाले पहले व्यक्ति बनें, जो खोज योग्यता बढ़ाने और स्मार्ट उत्पाद निर्णयों का मार्गदर्शन करने के लिए बनाया गया है। कॉपी और डिज़ाइन से लेकर पूरे फीचर्स तक, रियल टाइम में कुछ भी टेस्ट करें, और डेटा को दिखाने दें कि वास्तव में क्या काम करता है।

    A/B टेस्ट देखें

    समुदाय द्वारा निर्मित

    उन अद्भुत योगदानकर्ताओं से मिलें जो Intlayer को संभव बनाते हैं।

    हमसे जुड़ेंसभी योगदानकर्ताओं को देखें

    Markdown रेंडरर चुनना बंद करें

    यह पहले से Intlayer में है: बिना निर्भरता, MDX सक्षम, SSR के लिए तैयार, आद्योपांत टाइप्ड, और इस्तेमाल न होने पर बंडल से गायब।

    Markdown गाइड पढ़ें