Getting Started on Drasi Docs https://drasi.io/drasi-server/tutorials/getting-started/ Recent content in Getting Started on Drasi Docs Hugo en Copyright&nbsp;©&nbsp;Drasi&nbsp;a&nbsp;Series&nbsp;of&nbsp;LF&nbsp;Projects,&nbsp;LLC. For&nbsp;website&nbsp;terms&nbsp;of&nbsp;use,&nbsp;trademark&nbsp;policy&nbsp;and&nbsp;other&nbsp;project&nbsp;policies&nbsp;please&nbsp;see&nbsp;<a href="https://lfprojects.org/policies/">lfprojects.org/policies/</a>. https://drasi.io/drasi-server/tutorials/getting-started/viewer/ Mon, 01 Jan 0001 00:00:00 +0000 https://drasi.io/drasi-server/tutorials/getting-started/viewer/ <!DOCTYPE html> <!-- Copyright 2025 The Drasi Authors. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drasi Server - Getting Started Viewer</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; padding: 20px; } .header { text-align: center; margin-bottom: 30px; } .header h1 { color: #00d4ff; margin-bottom: 10px; } .status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: #2d2d44; font-size: 14px; } .status-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4444; } .status-dot.connected { background: #44ff44; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; max-width: 1400px; margin: 0 auto; } .query-panel { background: #2d2d44; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .query-header { background: #3d3d5c; padding: 15px 20px; border-bottom: 1px solid #4d4d6d; } .query-header h2 { font-size: 16px; color: #00d4ff; margin-bottom: 5px; } .query-header p { font-size: 12px; color: #888; } .query-content { padding: 15px; max-height: 300px; overflow-y: auto; } .result-table { width: 100%; border-collapse: collapse; font-size: 13px; } .result-table th { text-align: left; padding: 8px 12px; background: #3d3d5c; color: #00d4ff; font-weight: 500; } .result-table td { padding: 8px 12px; border-bottom: 1px solid #3d3d5c; } .result-table tr:hover { background: #3d3d5c; } .result-table tr.added { animation: highlight-add 2s ease-out; } .result-table tr.updated { animation: highlight-update 2s ease-out; } .result-table tr.deleted { animation: highlight-delete 1s ease-out; } @keyframes highlight-add { from { background: rgba(68, 255, 68, 0.3); } to { background: transparent; } } @keyframes highlight-update { from { background: rgba(255, 200, 68, 0.3); } to { background: transparent; } } @keyframes highlight-delete { from { background: rgba(255, 68, 68, 0.3); } to { background: transparent; } } .empty-state { text-align: center; padding: 40px; color: #666; } .event-log { grid-column: 1 / -1; } .event-log .query-content { max-height: 200px; font-family: 'Monaco', 'Menlo', monospace; font-size: 12px; } .log-entry { padding: 4px 0; border-bottom: 1px solid #3d3d5c; } .log-entry.add { color: #44ff44; } .log-entry.update { color: #ffc844; } .log-entry.delete { color: #ff4444; } .log-entry.info { color: #888; } .log-time { color: #666; margin-right: 10px; } .instructions { grid-column: 1 / -1; background: #2d2d44; border-radius: 12px; padding: 20px; margin-top: 20px; } .instructions h3 { color: #00d4ff; margin-bottom: 15px; } .instructions code { background: #3d3d5c; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', monospace; } .instructions ul { margin-left: 20px; line-height: 1.8; } </style> </head> <body> <div class="header"> <h1>Drasi Server - Getting Started</h1> <div class="status"> <span class="status-dot" id="statusDot"></span> <span id="statusText">Connecting...</span> </div> </div> <div class="container"> <!-- Hello World From Query --> <div class="query-panel"> <div class="query-header"> <h2>hello-world-from</h2> <p>Filters messages containing "Hello World"</p>