CoMarkup

Real-time code collaboration platform with instant rendering

Firefox Plugin Render Server
CoMarkup Preview

Key Features

🚀

Instant Rendering

Preview React components in real-time without needing to build your project.

👥

Real-time Collaboration

Edit and render code together with team members.

🔄

Git Synchronization

Integration with Git repositories for efficient workflow.

📱

Responsive Preview

Check how your components look on different devices.

🎨

Custom Themes

Customize the editor appearance to your preferences.

🔌

Browser Extensions

Use CoMarkup directly in your browser.

How It Works

1. Firefox Plugin

The Firefox plugin automatically detects React code fragments on web pages and adds a "Render" button that opens a popup with the rendered component.

  • Automatic React code detection
  • Code rendering in popup
  • Copy rendered HTML to clipboard
  • Rendering error handling
View code on GitHub
Firefox Plugin
// Automatic React code detection:
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const codeBlocks = node.querySelectorAll('pre, code');
          codeBlocks.forEach(addRenderButton);
        }
      });
    }
  });
});
Render Server
// Express server for rendering React components
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

app.post('/render', (req, res) => {
  try {
    const { code } = req.body;
    // Transform and render React component
    const component = eval(code);
    const html = ReactDOMServer.renderToString(
      React.createElement(component)
    );
    res.json({ html });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

2. Render Server

A local Express server that processes and renders JavaScript with React. The server takes React component code, compiles it, and returns the rendered HTML.

  • Code transformation with Babel
  • React component rendering
  • React hooks support
  • Tailwind CSS support
  • API communication
View code on GitHub

Use Cases

Development Teams

  • Documentation collaboration
  • Real-time code review
  • Rapid component prototyping

Content Creators

  • Writing and editing documentation
  • Creating technical blogs
  • Preparing tutorials

Companies

  • Product documentation
  • Internal wikis
  • Training materials

Education

  • Interactive materials
  • Student-teacher collaboration
  • Code presentations

Installation and Usage

Firefox Plugin

Temporary Installation:

  1. Clone the repository git clone https://github.com/comarkup/firefox
  2. In Firefox, navigate to about:debugging
  3. Click "This Firefox"
  4. Click "Load Temporary Add-on"
  5. Select the manifest.json file from the directory

Marketplace Installation:

  1. Visit the add-on page in Firefox Add-ons
  2. Click "Add to Firefox"
  3. Confirm the installation

Render Server

Installation and Startup:

  1. Clone the repository git clone https://github.com/comarkup/render-react
  2. Grant execution permissions: chmod +x setup.sh
  3. Run the installation script: ./setup.sh
  4. Start the server: npm start

Testing the API:

Use curl to test the API:

curl -X POST \
  http://localhost:3001/render \
  -H "Content-Type: application/json" \
  -d '{"code": "function ExampleComponent() { return React.createElement('\''div'\'', null, '\''Hello'\'') }"}'

Sample Components

Simple Component

function SimpleComponent() {
  return (
    <div className="p-4 bg-blue-100">
      <h2 className="text-xl font-bold">Hello CoMarkup!</h2>
      <p>This is a simple React component.</p>
    </div>
  );
}

Component with Hooks

function TestComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="p-4 bg-blue-100">
      <h1 className="text-xl font-bold">Counter Component</h1>
      <p>Current count: {count}</p>
      <button 
        className="bg-blue-500 text-white px-4 py-2 rounded mt-2"
        onClick={() => setCount(count + 1)}
      >
        Increment
      </button>
    </div>
  );
}

Security Features

Babel Transformation

The server performs secure code transformation through Babel, ensuring safe execution of React components.

Verified HTML

Frontend uses dangerouslySetInnerHTML only for verified HTML that has been processed and validated by the server.

CORS Implementation

Secure communication between server and client is ensured through proper CORS (Cross-Origin Resource Sharing) configuration.

Contributing

  1. Fork the repository

    Create your own copy of the project to work on.

  2. Create a feature branch

    Use git checkout -b feature/amazing-feature

  3. Commit your changes

    Use git commit -m 'Add some amazing feature'

  4. Push to the branch

    Use git push origin feature/amazing-feature

  5. Open a Pull Request

    Submit your changes for review and inclusion in the main project.

Contribute on GitHub