I Published This with Drag and Drop using Vrite
Tags: webdev, writing, showdev
Published: 2024-03-12 17:33:07

For many developers, blogging and technical writing play a key role in building their portfolio, sharing their projects, and for some — even in their day-to-day work. That’s why developer-centric platforms like [DEV](https://dev.to/) and [Hashnode](https://hashnode.com/), and even more general ones, like [Medium](https://medium.com/), are full of interesting technical content. The only problem with technical writing is in the actual _writing and publishing_ process. 

For blogs, the editing experience varies from platform to platform, and things like _cross-posting_ require a lot of effort (and copy-pasting) to adjust your content to each platform’s unique quirks.

On the other hand, more complex technical writing (when working on e.g. product documentation, or knowledge bases) often involves _custom content_ that’s unique to your publication and isn’t supported in any kind of writing tool or CMS.

You’re left with _Markdown_ which, while being pretty good for basic needs, is very limited, and usually requires various extensions and supersets to fit your needs ([MDX](https://mdxjs.com/), [Markdoc](https://markdoc.dev/), etc.). Also, MD might not be great for everyone (especially when writing longer pieces) and doesn’t provide the same experience as a modern WYSIWYG editor like [Notion](https://www.notion.so/).

These reasons (and many others) are why I decided to create [Vrite](https://vrite.io/) - an [open-source](https://github.com/vriteio/vrite) _developer content platform_.

## Vrite (v0.4)

![Vrite landing page](https://assets.vrite.io/6409e82d7dfc74cef7a72e0d/oHd_AKFsGqYTz8HixOI28.png)

With tons of built-in features, including:
- Content management dashboard (with Kanban and Table views);
- Embedded [Monaco Editor](https://microsoft.github.io/monaco-editor/) with [Prettier](https://prettier.io/) formatter;
- Hybrid WYSIWYG editor with real-time collaboration;
- _Vector search_ (with AI question-answering);
- Bi-directional _Git Sync_;

Vrite is meant to be the most versatile and extensible CMS-like platform for all your technical content needs.

### Extension System

With the latest `v0.4.x`, among many other features and improvements, the focus is on a new _extension system_.

An extension system is a key feature to make sure Vrite is able to handle pretty much any technical writing use case. From improving publishing (and cross-posting) to extending the capabilities of the WYSIWYG editor, a powerful extension system is the future of Vrite.

The goal is to make creating extensions not much more difficult than creating e.g. a React component, while making sure the extensions are sandboxed and secure.

To give you a sample of the extension API, here’s a snippet from a “first-party” _Dev.to extension_:

```typescript
/** @jsx createElement */
/** @jsxFrag createFragment */
import {
  Components,
  createView,
  createTemp,
  createFunction,
  createRuntime,
  ExtensionConfigurationViewContext,
  ExtensionContentPieceViewContext,
  createElement,
  createFragment,
} from '@vrite/sdk/extensions';

type Config = {
  // ...
};
type ContentPieceData = {
  // ...
};
export default createRuntime<Config>({
  onUninstall: createFunction(async ({ client }) => {
    // ...
  }),
  onConfigure: createFunction(async ({ client, config, spec }) => {
    // ...
  }),
  configurationView: createView<ExtensionConfigurationViewContext<Config>>(
    ({ use }) => {
      const [apiKey] = use('config.apiKey');
      const [organizationId] = use('config.organizationId');
      const [autoPublish, setAutoPublish] = use('config.autoPublish');
      const [contentGroupId, setContentGroupId] = use('config.contentGroupId');
      const [requireCanonicalLink] = use('config.requireCanonicalLink');
      const [draft] = use('config.draft');

      // ...

      return (
        <>
          <Components.Field
            type="text"
            color="contrast"
            label="API key"
            placeholder="API key"
            bind:value={apiKey}
          >
            Your Dev.to API key. You can generate one in the [settings
            page](https://dev.to/settings/extensions), under **DEV Community API
            Keys** section
          </Components.Field>
          {/* ... */}
        </>
      );
    },
  ),
  contentPieceView: createView<
    ExtensionContentPieceViewContext<Config, ContentPieceData>
  >(({ config, token, extensionId, notify, use, flush }) => {
    // ...
  }),
});
```

Speaking of which… this entire post was written in Vrite and published with a simple drag and drop using the Dev.to extension!

If you’re interested in trying it out for yourself, check out [Vrite Cloud](https://app.vrite.io/) and the official [docs](http://docs.vrite.io) (if you’re wondering, _yes_ — they were also written in Vrite, and published via _Git Sync_).

## Using The Dev.to Extension

Start by signing into [Vrite](https://app.vrite.io/).

![Vrite login screen](https://assets.vrite.io/6409e82d7dfc74cef7a72e0d/trw29rPwiwBbGyYt9CBQ1.png)

Then go to the _Extensions_ side panel.

![Navigating to the extensions side-panel](https://assets.vrite.io/6409e82d7dfc74cef7a72e0d/9O317hkWmi4ELPO-TQNkv.png)

### Installation

From the _Extensions_ side panel, in the _Available_ section, find _Dev.to_ and click **Install**.

![Vrite Dev.to extension](https://assets.vrite.io/65017ed7b0e627e259623b8a/EWm77fQwgi_tXL9Lj11dt.png)

### Configuration

The Dev.to extension has a few options you have to configure to fully activate it.

#### API Key

To retrieve your Dev.to API key, go to the bottom of the _Extensions_ section in the DEV _Settings_: [https://dev.to/settings/extensions](https://dev.to/settings/extensions)

Here, add a description and _Generate API Key_. Once the new key is available, copy and paste it into the extension’s configuration.

![DEV API key generation](https://assets.vrite.io/65017ed7b0e627e259623b8a/PglPIDqhQtIg-heHYdAF7.png)

#### Organization ID (optional)

If you want to publish the posts as an organization, you have to provide your _Organization ID_.

You can find it by going to your DEV dashboard ([https://dev.to/dashboard](https://dev.to/dashboard)) then switching from _Personal_ to your organization view using the selection menu above the posts list and copying the organization ID from the URL:

```
https://dev.to/dashboard/organization/[ID]
```

#### Content Group ID

The content group you want to automatically publish from. Once a content piece is moved directly to this content group, it’ll trigger a Webhook that’ll auto-publish the content piece on Dev.to.

You can copy the content group ID from the content group menu in either the dashboard or the explorer panel.

![Copying the content group ID from Kanban dashboard](https://assets.vrite.io/65017ed7b0e627e259623b8a/N5l7xhJcxGW95WUf0PmKG.png)

#### Require Canonical Link

When checked, the auto-publishing won’t trigger if the content piece doesn’t have a **canonical link** assigned. Useful when cross-posting the content to e.g. Dev.to and your own blog.

#### Auto-publish

Whether to enable auto-publishing for all content pieces by default.

#### Draft

Whether the article should be marked as a draft on the Dev.to platform (not publically visible).

### Usage

With auto-publish enabled, once ready, simply move (drag and drop) the content piece from e.g. _Drafts_ content group to the one configured e.g. _Published_. You should see the article published on Dev.to shortly after.

The extension also provides a content piece view (available from the _Extensions_ section of the _Content piece_ side panel.

From here, you can customize the _Auto-publish_ and _Draft_ per the given content piece, and also set a _Series name_ to associate the article with, once it’s published on DEV.

Finally, with or without the auto-publishing enabled, you can easily publish “manually” using the _Publish_ button.

![Dev.to extension's content piece view](https://assets.vrite.io/65017ed7b0e627e259623b8a/i6uXC8V_LHlhfvva3y-Y9.png)

## The Future of Vrite

Currently, the extension system is only available on the Vrite Cloud, which is a [paid product](https://vrite.io/pricing/) with a free trial available.

The extensions will be opened for self-hosting once the API is stabilized and all (or most) of the necessary features are implemented (i.e. permission control, an official extension store, versioning, and development tools).

Apart from the extension system, with features like sharing, and built-in front-ends in the pipeline, the future of Vrite looks exciting!
- 🌟 [Star on GitHub](https://github.com/vriteio/vrite)
- 🔥 [Try out Vrite](https://app.vrite.io/)
- ℹ️ [Documentation](https://docs.vrite.io/)
- 💬 [Join Discord](https://discord.gg/yYqDWyKnqE)
- 🐦 [Follow on Twitter](https://twitter.com/vriteio)
- 💼 [Follow on LinkedIn](https://www.linkedin.com/company/vrite)