Window 8 - Beyond the Surface: How Strife CMS Elevates the Developer Experience

There’s a difference between good tools and tools you quietly trust. Good tools do what you expect. The best ones vanish into your process, making everything feel natural, fluid, and effortless. This kind of quiet support is called "Developer Experience" (DX)—the subtle details that help you stay focused on what matters, rather than wrestling with the software you use.

Strife takes these invisible details seriously. Its Live Preview feature isn’t just about updating the screen when you change content. It’s about relieving you from the mental overhead of manual refreshes and guesswork. Instead of repeatedly jumping between your editor and the browser, you see your edits unfold right as you type. You don’t even think about it; it just happens. That’s the magic of a great DX.

Listen, Adapt, Relax

Central to this experience is a small but powerful function: subscribe. It works behind the scenes, listening for any adjustments in your content and instantly sharing those changes with your site. You don’t need to know how it’s set up, or memorize a list of steps. You just write your content, watch it appear, and stay in the flow.

No Extra Steps

Picture editing a title. Without Strife, you might type some changes, hit save, and refresh your page. With Strife, you simply type—and the page updates. You never break your concentration. It’s one of those small details that feels obvious once you have it, yet so easy to miss if it’s gone.

Here’s a peek at the code that makes it happen:

import { subscribe } from '@strifeapp/strife'

const onChange = (data) => {
  // Updates when new content arrives
  console.log('Content updated:', data);
};

const unsubscribe = subscribe(onChange);

// Later, if you need to stop:
// unsubscribe();

The result? Your content updates the moment you type in some new text or fixing an image that needs to be cropped. Nothing to toggle, no manual refreshing. Invisible complexity turned into effortless clarity.

Fitting into Your Flow

Strife doesn’t force you into its patterns. Instead, it adapts to yours. Maybe you’re working in React, maybe you prefer Svelte, or maybe you love the clean lines of LitElement. Strife integrates seamlessly, letting you keep your familiar tools while still enjoying live previews that move at your speed.

React Example

import React, { useEffect, useState } from 'react';
import { subscribe } from '@strifeapp/strife';

function MyLivePreview() {
  const [content, setContent] = useState(null);

  useEffect(() => subscribe(setContent), []);

  const { title = 'Title…', body = '…' } = content ?? {};

  return (
    <div>
      <h1>{title}</h1>
      <p>{body}</p>
    </div>
  );
}

export default MyLivePreview;

Svelte Example

<script>
  import { onMount } from 'svelte';
  import { subscribe } from '@strifeapp/strife';

  let content = { title: 'Title…', body: '…' };

  onMount(() => {
    return subscribe(data => {
      content = data;
    });
  });
</script>

<h1>{content.title}</h1>
<p>{content.body}</p>

LitElement Example

import { LitElement, html } from 'lit';
import { subscribe } from '@strifeapp/strife';

class MyLivePreview extends LitElement {
  static properties = {
    content: { type: Object }
  };

  constructor() {
    super();
    this.content = { title: 'Title…', body: '…' };
  }

  connectedCallback() {
    super.connectedCallback();
    this.unsubscribe = subscribe((data) => {
      this.content = data;
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    if (this.unsubscribe) this.unsubscribe();
  }

  render() {
    return html`
      <h1>${this.content.title}</h1>
      <p>${this.content.body}</p>
    `;
  }
}

customElements.define('my-live-preview', MyLivePreview);

No Distractions, Just Results

Strife’s Live Preview isn’t a flashy feature designed to impress on first glance. It’s quieter than that, existing to keep you in a state of flow. You spend less time orchestrating your environment and more time shaping your content. Over time, this simplicity adds up. It becomes the difference between feeling slightly off-balance and feeling entirely at ease.

The best tools slip into the background, almost disappearing as you work. Strife CMS is built on that principle: invisible details that make your day a bit smoother, your process a bit calmer, and your results a bit better. That’s DX done right.