tauri-markdown-editor VS vite

Compare tauri-markdown-editor vs vite and see what are their differences.

tauri-markdown-editor

By whoisryosuke
Suggest topics
Source Code
Suggest alternative
Edit details

vite

Next generation frontend tooling. It's fast! (by vitejs)
Build Tools Vite HMR Frontend Build Tool dev-server
Source Code
vitejs.dev
Suggest alternative
Edit details
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
tauri-markdown-editor vite
1 794
11 65,026
- 1.3%
10.0 9.9
over 1 year ago 5 days ago
TypeScript TypeScript
- MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

tauri-markdown-editor

Posts with mentions or reviews of tauri-markdown-editor. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-10-13.
  • Create a Markdown Editor with Rust and React
    12 projects | dev.to | 13 Oct 2022
    I opened up the src/App.tsx and added a and synced any text changes to React state.

    import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/tauri";
import "./App.css";

function App() {
  const [markdown, setMarkdown] = useState("");

  return (
    
    className="container">
      
    Welcome to Tauri!
    

      
    className="row">
        href="https://vitejs.dev" target="_blank">
          src="/vite.svg" className="logo vite" alt="Vite logo" />
        
        href="https://tauri.app" target="_blank">
          src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
        
        href="https://reactjs.org" target="_blank">
          src={reactLogo} className="logo react" alt="React logo" />
        
      
    

      
    Click on the Tauri, Vite, and React logos to learn more.
    

      
    className="row">
        
    
          id</span><span class="o">=</span><span class="s2">"greet-input"</span>
            <span class="nv">onChange</span><span class="o">={(</span>e<span class="o">)</span> <span class="o">=></span> setMarkdown<span class="o">(</span>e.currentTarget.value<span class="o">)}</span>
          />
        </div>
      </div>
    </div>
  <span class="o">)</span><span class="p">;</span>
<span class="o">}</span>

<span class="nb">export </span>default App<span class="p">;</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>Now that we have a textbox we can write Markdown inside, let’s convert that to HTML to preview.</p>

<h2>
  <a name="creating-a-tauri-command" href="#creating-a-tauri-command">
  </a>
  Creating a Tauri command
</h2>

<p>We’ll need to use <a href="https://tauri.app/v1/guides/features/command/">Tauri commands</a> to communicate between the frontend and backend - and vice versa (similar to <a href="https://www.electronjs.org/docs/latest/tutorial/ipc">the IPC layer in Electron</a>).</p>

<p>Tauri comes with an example Tauri command called <code>greet()</code> already setup, so let’s use that and change it to parse Markdown. Open up <code>src-tauri/src/main.rs</code> and change it to the following:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight rust"><code><span class="nd">#![cfg_attr(</span>
    <span class="nd">all(not(debug_assertions),</span> <span class="nd">target_os</span> <span class="nd">=</span> <span class="s">"windows"</span><span class="nd">),</span>
    <span class="nd">windows_subsystem</span> <span class="nd">=</span> <span class="s">"windows"</span>
<span class="nd">)]</span>
<span class="c1">// Import comrak</span>
<span class="k">use</span> <span class="nn">comrak</span><span class="p">::{</span><span class="n">markdown_to_html</span><span class="p">,</span> <span class="n">ComrakOptions</span><span class="p">};</span>

<span class="c1">// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command</span>
<span class="nd">#[tauri::command]</span>
<span class="k">fn</span> <span class="nf">greet</span><span class="p">(</span><span class="n">markdown</span><span class="p">:</span> <span class="o">&</span><span class="nb">str</span><span class="p">)</span> <span class="k">-></span> <span class="nb">String</span> <span class="p">{</span>
    <span class="c1">// format!("Hello, {}! You've been greeted from Rust!", name)</span>

        <span class="c1">// Parse the markdown text to HTML</span>
    <span class="k">let</span> <span class="n">html</span> <span class="o">=</span> <span class="nf">markdown_to_html</span><span class="p">(</span><span class="o">&</span><span class="n">markdown</span><span class="p">,</span> <span class="o">&</span><span class="nn">ComrakOptions</span><span class="p">::</span><span class="nf">default</span><span class="p">());</span>

    <span class="nd">println!</span><span class="p">(</span><span class="s">"Markdown parsed into HTML </span><span class="se">\n</span><span class="s">"</span><span class="p">);</span>
    <span class="nd">println!</span><span class="p">(</span><span class="s">"{html}"</span><span class="p">);</span>

        <span class="c1">// We return the HTML to the frontend (in Rust, we return by omitting the `;`)</span>
    <span class="n">html</span>
<span class="p">}</span>

<span class="k">fn</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
    <span class="nn">tauri</span><span class="p">::</span><span class="nn">Builder</span><span class="p">::</span><span class="nf">default</span><span class="p">()</span>
                <span class="c1">// Here is where we add our Tauri commands to our app</span>
        <span class="nf">.invoke_handler</span><span class="p">(</span><span class="nn">tauri</span><span class="p">::</span><span class="nd">generate_handler!</span><span class="p">[</span><span class="n">greet</span><span class="p">])</span>
        <span class="nf">.run</span><span class="p">(</span><span class="nn">tauri</span><span class="p">::</span><span class="nd">generate_context!</span><span class="p">())</span>
        <span class="nf">.expect</span><span class="p">(</span><span class="s">"error while running tauri application"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>And in our frontend, let’s create a <code><button></code> we can press to run the Tauri command. We use the <code>invoke</code> function provided by Tauri that’ll call a Tauri command with the same name.<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">reactLogo</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./assets/react.svg</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">invoke</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@tauri-apps/api/tauri</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="dl">"</span><span class="s2">./App.css</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">html</span><span class="p">,</span> <span class="nx">setHtml</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="dl">""</span><span class="p">);</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">markdown</span><span class="p">,</span> <span class="nx">setMarkdown</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="dl">""</span><span class="p">);</span>

  <span class="k">async</span> <span class="kd">function</span> <span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command</span>
    <span class="nx">setHtml</span><span class="p">(</span><span class="k">await</span> <span class="nx">invoke</span><span class="p">(</span><span class="dl">"</span><span class="s2">greet</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">markdown</span> <span class="p">}));</span>
  <span class="p">}</span>

  <span class="k">return</span> <span class="p">(</span>
    <span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="p">=</span><span class="s">"container"</span><span class="p">></span>
      <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Welcome to Tauri!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>

      <span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="p">=</span><span class="s">"row"</span><span class="p">></span>
        <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="p">=</span><span class="s">"https://vitejs.dev"</span> <span class="na">target</span><span class="p">=</span><span class="s">"_blank"</span><span class="p">></span>
          <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="p">=</span><span class="s">"/vite.svg"</span> <span class="na">className</span><span class="p">=</span><span class="s">"logo vite"</span> <span class="na">alt</span><span class="p">=</span><span class="s">"Vite logo"</span> <span class="p">/></span>
        <span class="p"></</span><span class="nt">a</span><span class="p">></span>
        <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="p">=</span><span class="s">"https://tauri.app"</span> <span class="na">target</span><span class="p">=</span><span class="s">"_blank"</span><span class="p">></span>
          <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="p">=</span><span class="s">"/tauri.svg"</span> <span class="na">className</span><span class="p">=</span><span class="s">"logo tauri"</span> <span class="na">alt</span><span class="p">=</span><span class="s">"Tauri logo"</span> <span class="p">/></span>
        <span class="p"></</span><span class="nt">a</span><span class="p">></span>
        <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="p">=</span><span class="s">"https://reactjs.org"</span> <span class="na">target</span><span class="p">=</span><span class="s">"_blank"</span><span class="p">></span>
          <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="p">=</span><span class="si">{</span><span class="nx">reactLogo</span><span class="si">}</span> <span class="na">className</span><span class="p">=</span><span class="s">"logo react"</span> <span class="na">alt</span><span class="p">=</span><span class="s">"React logo"</span> <span class="p">/></span>
        <span class="p"></</span><span class="nt">a</span><span class="p">></span>
      <span class="p"></</span><span class="nt">div</span><span class="p">></span>

      <span class="p"><</span><span class="nt">p</span><span class="p">></span>Click on the Tauri, Vite, and React logos to learn more.<span class="p"></</span><span class="nt">p</span><span class="p">></span>

      <span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="p">=</span><span class="s">"row"</span><span class="p">></span>
        <span class="p"><</span><span class="nt">div</span><span class="p">></span>
          <span class="p"><</span><span class="nt">textarea</span>
            <span class="na">id</span><span class="p">=</span><span class="s">"greet-input"</span>
            <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="nx">setMarkdown</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span><span class="si">}</span>
          <span class="p">/></span>
          <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="p">=</span><span class="s">"button"</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nx">greet</span><span class="p">()</span><span class="si">}</span><span class="p">></span>
            Convert to HTML
          <span class="p"></</span><span class="nt">button</span><span class="p">></span>
        <span class="p"></</span><span class="nt">div</span><span class="p">></span>
      <span class="p"></</span><span class="nt">div</span><span class="p">></span>
      <span class="p"><</span><span class="nt">p</span><span class="p">></span><span class="si">{</span><span class="nx">html</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">></span>
    <span class="p"></</span><span class="nt">div</span><span class="p">></span>
  <span class="p">);</span>
<span class="p">}</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>If you type some Markdown into the text box and click the button, it should print out raw HTML representing your Markdown. Here’s <a href="https://github.com/whoisryosuke/tauri-markdown-editor/commit/321f5bcfb1c0e370c27b8781d6f70fd74e6b67df">the commit on Github for reference.</a></p>

<h3>
  <a name="but-how-do-we-preview-the-html" href="#but-how-do-we-preview-the-html">
  </a>
  But how do we preview the HTML?
</h3>

<p>If we wanted to preview the HTML, we could use React’s <code>dangerouslySetInnerHTML</code> to inject the HTML inside our app:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="kd">const</span> <span class="nx">createMarkdownMarkup</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">({</span>
  <span class="na">__html</span><span class="p">:</span> <span class="nx">html</span>
<span class="p">})</span>

<span class="o"><</span><span class="nx">div</span> <span class="nx">dangerouslySetInnerHTML</span><span class="o">=</span><span class="p">{</span><span class="nx">createMarkdownMarkup</span><span class="p">()}</span> <span class="sr">/</span><span class="err">>
</span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>And ideally, this isn’t as “dangerous” as it sounds, because <a href="https://github.com/kivikakk/comrak#security">Comrak sanitizes the Markdown output for any malicious code</a> before converting to HTML 👍</p>

<p>We could also update the <code>onChange</code> function to run our conversion process, instead of waiting for a button press, so we “instantly” see a live preview. In my case, I do it in a useEffect with a refresh boolean — but it’s all good. <em>Note, this is a little risky, since the user might be able to break the app, so in production it’d be best to create a cache of the last “working” preview just in case one fails.</em><br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useEffect</span><span class="p">,</span> <span class="nx">useRef</span><span class="p">,</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">reactLogo</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./assets/react.svg</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">invoke</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@tauri-apps/api/tauri</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="dl">"</span><span class="s2">./App.css</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">html</span><span class="p">,</span> <span class="nx">setHtml</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="dl">""</span><span class="p">);</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">markdown</span><span class="p">,</span> <span class="nx">setMarkdown</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="dl">""</span><span class="p">);</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">refreshCheck</span><span class="p">,</span> <span class="nx">setRefreshCheck</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>

  <span class="k">async</span> <span class="kd">function</span> <span class="nx">greet</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">setRefreshCheck</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="nx">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">parseMarkdown</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
      <span class="nx">setHtml</span><span class="p">(</span><span class="k">await</span> <span class="nx">invoke</span><span class="p">(</span><span class="dl">"</span><span class="s2">greet</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">markdown</span> <span class="p">}));</span>
      <span class="nx">setRefreshCheck</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">new markdown</span><span class="dl">"</span><span class="p">);</span>
    <span class="p">};</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">refreshed</span><span class="dl">"</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">refreshCheck</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">parseMarkdown</span><span class="p">();</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">parsing!</span><span class="dl">"</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">},</span> <span class="p">[</span><span class="nx">refreshCheck</span><span class="p">]);</span>

  <span class="kd">const</span> <span class="nx">createMarkdownMarkup</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">({</span>
    <span class="na">__html</span><span class="p">:</span> <span class="nx">html</span><span class="p">,</span>
  <span class="p">});</span>

  <span class="kd">const</span> <span class="nx">handleTextArea</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
    <span class="nx">setMarkdown</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
    <span class="nx">setRefreshCheck</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">need new markdown!</span><span class="dl">"</span><span class="p">);</span>
  <span class="p">};</span>

  <span class="k">return</span> <span class="p">(</span>
    <span class="p"><</span><span class="nt">div</span><span class="p">></span>
      <span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="p">=</span><span class="s">"row"</span><span class="p">></span>
        <span class="p"><</span><span class="nt">div</span><span class="p">></span>
          <span class="p"><</span><span class="nt">textarea</span> <span class="na">id</span><span class="p">=</span><span class="s">"greet-input"</span> <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="nx">handleTextArea</span><span class="si">}</span> <span class="p">/></span>
          <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="p">=</span><span class="s">"button"</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="p">()</span> <span class="o">=></span> <span class="nx">greet</span><span class="p">()</span><span class="si">}</span><span class="p">></span>
            Convert to HTML
          <span class="p"></</span><span class="nt">button</span><span class="p">></span>
        <span class="p"></</span><span class="nt">div</span><span class="p">></span>
      <span class="p"></</span><span class="nt">div</span><span class="p">></span>
      <span class="p"><</span><span class="nt">div</span> <span class="na">dangerouslySetInnerHTML</span><span class="p">=</span><span class="si">{</span><span class="nx">createMarkdownMarkup</span><span class="p">()</span><span class="si">}</span> <span class="p">/></span>
    <span class="p"></</span><span class="nt">div</span><span class="p">></span>
  <span class="p">);</span>
<span class="p">}</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>Here’s <a href="https://github.com/whoisryosuke/tauri-markdown-editor/commit/4a3b351509d1ec0b363950c778f4ea42f92a32f6">the commit on Github for reference.</a></p>

<h1>
  <a name="the-world-is-your-markdown" href="#the-world-is-your-markdown">
  </a>
  The world is your Markdown
</h1>

<p>Now you can parse Markdown using Rust, there’s lots of cool stuff you can do! From CLIs to UI apps, you can make tools that help people use Markdown. And ideally, this will run faster than most other implementations (like Electron apps) because it’s running in Rust <em>(unless you can write Markdown tooling in C or something)</em>.</p>

<p>I hope this helped you understand some Rust fundamentals and new techniques to use down the line.</p>

<p>As always, if you have any questions or make something using this guide, <a href="https://twitter.com/whoisryosuke">tag me on Twitter</a>. I’d love to help or see what cool stuff you’re hacking on.</p>

<p><strong>You can find the complete code for this post in <a href="https://github.com/whoisryosuke/tauri-markdown-editor">my tauri-markdown-editor repo</a>.</strong></p>

<p>Stay regular!<br>
Ryo</p>

vite

Posts with mentions or reviews of vite. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2024-05-08.
  • Comparing Hattip vs. Express.js for modern app development
    5 projects | dev.to | 8 May 2024
    As of this writing, initializing a Hattip project requires some manual commands. However, keep in mind that a zero-config development environment based on Vite is in the works.
  • React TypeScript - Vite + React
    1 project | dev.to | 8 May 2024
    import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 4200, } })
  • I Disappear
    3 projects | dev.to | 6 May 2024
    For the frontend of "I Disappear," I leverage the automated build & deploy system provided by Netlify, which seamlessly integrates with Vite. This setup ensures that every deployment is optimized for performance, utilizing Vite’s modern build tools to enhance speed and efficiency.
  • FlowDiver: The Road to SSR - Part 1
    3 projects | dev.to | 3 May 2024
    Given our team's collective proficiency within the React ecosystem, we decided to leverage this expertise for our project. Initially, we contemplated utilizing Next.js; however, due to the limited practical experience with this technology among key engineers and the pressing timeline to develop the first prototype, we opted for a Single Page Application(SPA) approach. For bundling, we selected Vite, primarily due to its super fast build times, simplicity of configuration, and potential for a nearly seamless transition to server-side rendering.
  • Inflight Magazine no. 9
    5 projects | dev.to | 1 May 2024
    We are continuing to add new project templates for various types of projects, and we've recently created one for the infamous combination of React with Vite tooling.
  • Top 12+ Battle-Tested React Boilerplates for 2024
    5 projects | dev.to | 29 Apr 2024
    Vite focuses on providing an extremely fast development server and workflow speed in web development. It uses its own ES module imports during development, speeding up the startup time.
  • Vite vs Nextjs: Which one is right for you?
    3 projects | dev.to | 29 Apr 2024
    Vite and Next.js are both top 5 modern development framework right now. They are both great depending on your use case so we’ll discuss 4 areas: Architecture, main features, developer experience and production readiness. After learning about these we’ll have a better idea of which one is best for your project.
  • Setup React Typescript with Vite & ESLint
    1 project | dev.to | 25 Apr 2024
    import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 3000 }, css: { devSourcemap: true }, resolve: { alias: { '~': path.resolve(__dirname, './src') } } })
  • Approaches to Styling React Components, Best Use Cases
    2 projects | dev.to | 24 Apr 2024
    I am currently utilizing Vite:
  • Getting started with TiniJS framework
    7 projects | dev.to | 20 Apr 2024
    Homepage: https://vitejs.dev/

What are some alternatives?

When comparing tauri-markdown-editor and vite you can also consider the following projects:

yew - Rust / Wasm framework for creating reliable and efficient web applications

Next.js - The React Framework

mdx-electron - Electron app to author and preview MDX files

parcel - The zero configuration build tool for the web. 📦🚀

comrak - CommonMark + GFM compatible Markdown parser and renderer

esbuild - An extremely fast bundler for the web

commonmark-spec - CommonMark spec, with reference implementations in C and JavaScript

swc - Rust-based platform for the Web

rust-markdown-playground - Experimenting with Markdown and MDX using Rust.

astro - The web framework for content-driven websites. ⭐️ Star to support our work!

tauri - Build smaller, faster, and more secure desktop applications with a web frontend.

Rollup - Next-generation ES module bundler

tauri-markdown-editor vs yew vite vs Next.js tauri-markdown-editor vs mdx-electron vite vs parcel tauri-markdown-editor vs comrak vite vs esbuild tauri-markdown-editor vs commonmark-spec vite vs swc tauri-markdown-editor vs rust-markdown-playground vite vs astro tauri-markdown-editor vs tauri vite vs Rollup