argdown
grammarly-for-developers
argdown | grammarly-for-developers | |
---|---|---|
8 | 2 | |
853 | 143 | |
- | - | |
0.0 | 10.0 | |
about 2 months ago | 10 months ago | |
JavaScript | JavaScript | |
- | Apache License 2.0 |
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.
argdown
-
JSON Canvas – An open file format for infinite canvas data
```
You'd then be able to interleave prose and graph structures in a single file rather than dealing with two separate parsing structures. Even better, the end result would still be Markdown compliant.
[0]: https://argdown.org/
- How to draw beautiful software architecture diagrams
-
Ask HN: What software diagrams have made a difference I your decision making?
Having a diagram helped me multiple times. I'm aware of different types and I'm quite interested in visualisation, but... it never really mattered. A diagram showing what you want is good, others are not, regardless of whether it has an official name.
One specific non-SW type I consciously use is an argument map, if you're after decision making. See argdown https://argdown.org/
-
Argdown
Does someone know about https://argdown.org/ syntax and has some ideas on how it could be related (implemented) to Obsidian Canvas?
- Argdown: A simple syntax for complex argumentation
grammarly-for-developers
-
10 Best Practices for Writing Documentation (For Those Who Would Rather Do Anything Else)
Many of the pages in the Grammarly for Developers documentation include embedded code snippets as well as links to CodeSandbox environments. Each CodeSandbox environment runs a code example that we store in the Grammarly for Developers GitHub repository.
-
How to Add Writing Assistance to Any JavaScript App in Minutes
The Grammarly Text Editor SDK provides a JavaScript plugin that lets you add Grammarly’s writing assistance to any ,
, or
contenteditable
element in your application. As they type, your users will automatically get real-time writing suggestions for correctness, clarity, tone, and more, without needing to sign up for a Grammarly account. You can also customize the plugin to tailor it to your application’s UX. The core functionality is free, and you can sign up for the paid Plus plan to get advanced writing features.Adding writing assistance to your web app
Let’s walk through integrating Grammarly with an app.
💡 If you’d like to code along with this article, you can fork our starter templates for React, Vue, vanilla JavaScript, and HTML on Codesandbox.io. You can also clone the Grammarly for Developers repository on GitHub. The starter templates are under examples and follow the naming pattern demo-[framework-name].
❗If you have the Grammarly browser extension, make sure it’s turned off, or the Grammarly Text Editor plugin will not initialize.
Create a Grammarly for Developers account
If you don’t already have one, sign up for a free Grammarly account at developer.grammarly.com. If you already have a Grammarly account, you can use your existing credentials to log in.
Set up your Grammarly for Developers app
Once you’ve signed in, you’ll be taken to the My Apps page, where you can create your first Grammarly for Developers app. After you’ve created your first app, you’ll automatically be taken to the App Console. There are two steps you’ll need to take in the App Console: getting your client ID and configuring your origins.
Get your client ID
Your app has a client ID that identifies your Grammarly Text Editor SDK integration. To get your client ID, navigate to the web client page located under “Clients” in the navigation menu. Then, you can grab your client ID from the quick start or find it under the Credentials header at the bottom of the page.
Configure your web app origins
Add the origin of your web app to the list of origins. You can find it in the Credentials section at the bottom of the page, just below the client ID.
Add the Grammarly Text Editor SDK dependency
Next, depending on which framework you’re using, you’ll install the appropriate npm package for the Grammarly Text Editor SDK. We have a core JavaScript library as well as framework-specific wrapper libraries for React and Vue.
React
If you’re using React, you can install the React wrapper library:
npm install @grammarly/editor-sdk-react
Enter fullscreen mode Exit fullscreen modeVue
If you’re using Vue, you can install the Vue wrapper library:
npm install @grammarly/editor-sdk-vue
Enter fullscreen mode Exit fullscreen modeJavaScript
If you’re using plain JavaScript or a framework other than React or Vue, install the core library:
npm install @grammarly/editor-sdk
Enter fullscreen mode Exit fullscreen modeHTML
If you don’t want to use a build step or are building a prototype, you can also use a content delivery network (CDN) like jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@grammarly/editor-sdk?clientId=your_client_ID"> </script>
Enter fullscreen mode Exit fullscreen modeAdd the plugin to your text editor
The last step is to add the Grammarly Text Editor Plugin to your text editor.
Using the Grammarly Text Editor component
The fastest way to add the plugin is to wrap your text editor with a Grammarly Text Editor Plugin component. In the examples below, we’re wrapping a
</code>, but the plugin works with <code><input></code>, or <code>contenteditable</code> elements as well.</p> <h4> <a name="react" href="#react"> </a> React </h4> <p>In React and Vue, you’ll import the component and use it to wrap your text editor. Make sure to pass in your client ID.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">GrammarlyEditorPlugin</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@grammarly/editor-sdk-react</span><span class="dl">'</span> <span class="p">...</span> <span class="k">export</span> <span class="kd">function</span> <span class="nx">GrammarlyEditor</span><span class="p">()</span> <span class="p">{</span> <span class="o"><</span><span class="nx">GrammarlyEditorPlugin</span> <span class="nx">clientId</span><span class="o">=</span><span class="dl">"</span><span class="s2">your_client_ID</span><span class="dl">"</span><span class="o">></span> <span class="o"><</span><span class="nx">textarea</span> <span class="o">/></span> <span class="o"><</span><span class="sr">/GrammarlyEditorPlugin</span><span class="err">> </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> <h4> <a name="vue" href="#vue"> </a> Vue </h4> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="o"><</span><span class="nx">script</span> <span class="nx">setup</span><span class="o">></span> <span class="k">import</span> <span class="p">{</span> <span class="nx">GrammarlyEditorPlugin</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@grammarly/editor-sdk-vue</span><span class="dl">'</span> <span class="o"><</span><span class="sr">/script</span><span class="err">> </span><span class="p">...</span> <span class="o"><</span><span class="nx">template</span><span class="o">></span> <span class="o"><</span><span class="nx">GrammarlyEditorPlugin</span> <span class="nx">clientId</span><span class="o">=</span><span class="dl">"</span><span class="s2">your_client_ID</span><span class="dl">"</span><span class="o">></span> <span class="o"><</span><span class="nx">textarea</span> <span class="o">/></span> <span class="o"><</span><span class="sr">/GrammarlyEditorPlugin</span><span class="err">> </span><span class="o"><</span><span class="sr">/template</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> <h4> <a name="javascript" href="#javascript"> </a> JavaScript </h4> <p>In plain JS and HTML, you’ll wrap your text editor with a <code><grammarly-editor-plugin></code> component and pass your client ID when initializing the SDK. If you’re using the core JavaScript library, you’ll do this by calling <code>Grammarly.init()</code> and passing in your client ID.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">Grammarly</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@grammarly/editor-sdk</span><span class="dl">'</span> <span class="nx">Grammarly</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nx">your_client_ID</span><span class="p">)</span> <span class="c1">// initialize the SDK with your client ID</span> <span class="p">...</span> <span class="o"><</span><span class="nx">grammarly</span><span class="o">-</span><span class="nx">editor</span><span class="o">-</span><span class="nx">plugin</span><span class="o">></span> <span class="o"><</span><span class="nx">textarea</span><span class="o">><</span><span class="sr">/textarea</span><span class="err">> </span><span class="o"><</span><span class="sr">/grammarly-editor-plugin</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> <h4> <a name="html" href="#html"> </a> HTML </h4> <p>In HTML, you can initialize the SDK by passing your client ID to the script tag as a parameter. Loading the SDK through a CDN is a good approach for development but isn’t meant for production.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="o"><</span><span class="nx">grammarly</span><span class="o">-</span><span class="nx">editor</span><span class="o">-</span><span class="nx">plugin</span><span class="o">></span> <span class="o"><</span><span class="nx">textarea</span><span class="o">><</span><span class="sr">/textarea</span><span class="err">> </span><span class="o"><</span><span class="sr">/grammarly-editor-plugin</span><span class="err">> </span><span class="p">...</span> <span class="o"><</span><span class="nx">script</span> <span class="nx">src</span><span class="o">=</span><span class="dl">"</span><span class="s2">https://cdn.jsdelivr.net/npm/@grammarly/editor-sdk?clientId=your_client_ID</span><span class="dl">"</span><span class="o">></span> <span class="o"><</span><span class="sr">/script</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>Now your writing assistance integration is complete! 🎉 </p> <p><iframe src="https://codesandbox.io/embed/8ogxiw" style="width:100%; height:calc(300px + 8vw); border:0; border-radius: 4px; overflow:hidden;" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" loading="lazy" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"> </iframe> </p> <p>Try writing some text in your text editor. The Grammarly button should appear in the bottom right corner of your web page. If it isn’t showing, check out our article on <a href="https://developer.grammarly.com/docs/diagnosing-issues?utm_source=devto&utm_medium=blog&utm_campaign=2023-04-04-add-writing-assistance-any-javascript-app#general-debugging">diagnosing issues</a>.</p> <h2> <a name="wrapping-up" href="#wrapping-up"> </a> Wrapping up </h2> <p>You’ve learned how to add writing assistance to any JavaScript application using the Grammarly Text Editor SDK, but this is just the beginning. You can <a href="https://developer.grammarly.com/docs/?utm_source=devto&utm_medium=blog&utm_campaign=2023-04-04-add-writing-assistance-any-javascript-app">explore our docs</a> to learn how to configure the behavior of the plugin, set the default English dialect, and use CSS to customize the plugin’s theme. You can also demo configuration options in real time without writing a line of code using the <a href="https://developer.grammarly.com/configure?utm_source=devto&utm_medium=blog&utm_campaign=2023-04-04-add-writing-assistance-any-javascript-app">Configurator</a>.</p> <p>If you have questions about the Grammarly Text Editor SDK or want to make a feature request, join us on the Grammarly for Developers <a href="https://github.com/grammarly/grammarly-for-developers/discussions">discussion board</a> on GitHub. To stay up to date on the SDK’s development as we add new features, follow <a href="https://mobile.twitter.com/GrammarlyDevs">@GrammarlyDevs</a> on Twitter. We’d love to hear about what you’re building.</p> <p>The post <a href="https://www.grammarly.com/blog/developer/writing-assistance-javascript-app/?utm_source=devto&utm_medium=blog&utm_campaign=2023-04-04-add-writing-assistance-any-javascript-app">How to Add Writing Assistance to Any JavaScript App in Minutes</a> appeared first on <a href="https://www.grammarly.com/blog?utm_source=devto&utm_medium=blog&utm_campaign=2023-04-04-add-writing-assistance-any-javascript-app">Grammarly Blog</a>.</p>
What are some alternatives?
usfm-grammar - An elegant USFM parser.
cometx - All-in-one chat and forums for communities.
mermaid-js-auto-renderer - Mermaid JS webpage auto renderer
Dalaix - Easy installer for Dalai: LLaMA on your local machine
docopt - This project is no longer maintained. Please see https://github.com/jazzband/docopt-ng
authgear-example-spa-js - Authgear sample for SPA (Single Page App)
obsidian-argdown-plugin
SheetJS js-xlsx - 📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs
revezone - A lightweight local-first graphic-centric productivity tool to build your second brain. Supporting Excalidraw/Tldraw whiteboard and notion-like note. 一款以图形为中心、轻量级、本地优先的用于构建第二大脑的效率工具。支持 Excalidraw、Tldraw 白板和类 Notion 笔记。
js-xlsx - :green_book: SheetJS Community Edition -- Spreadsheet Data Toolkit [Moved to: https://github.com/SheetJS/sheetjs]
excalidraw-collaboration - excalidraw with collaboration feature, self-hosting, and only one-click deploy
mkcli - Markdown command line interface definition