Quickstart

<!DOCTYPE html>
<html>
<head>
  <title>My First GUN App</title>
</head>
<body>
  <h1>Realtime Data</h1>
  <div id="output"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
  <script src="app.js"></script>
</body>
</html>

// Initialize GUN
const gun = GUN();

// Store data
gun.get('mark').put({
  name: "Mark",
  email: "mark@gun.eco",
});

// Listen for realtime updates
gun.get('mark').on((data, key) => {
  console.log("Realtime updates:", data);
  document.getElementById('output').innerHTML = 
    `Name: ${data.name}<br>Email: ${data.email}`;
});

// Update data every second
setInterval(() => { 
  gun.get('mark').get('timestamp').put(new Date().toISOString());
}, 1000);

// Listen for timestamp updates
gun.get('mark').get('timestamp').on((data) => {
  console.log("Current time:", data);
});

<!DOCTYPE html>
<html>
<head>
  <title>GUN Todo List</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>Thoughts</h1>
  
  <form id="form">
    <input id="input" placeholder="Add a thought...">
    <button>Add</button>
  </form>
  
  <ul id="parentList"></ul>
  
  <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
  <script>
    const gun = Gun().get('thoughts');
    const parentList = document.getElementById('parentList');
    const input = document.getElementById('input');
    const form = document.getElementById('form');
    
    // Handle double-click to delete
    const dynamicEvent = e => {
      const target = e.target;
      gun.get(target.id).put(null);
      
      if (target.innerHTML === ' null' || target.innerHTML === '') {
        target.style.display = 'none';
      }
    }
    
    // Listen for all thoughts
    gun.map().on((thought, id) => {
      parentList.insertAdjacentHTML('beforeend', 
        `<li id="${id}"> ${thought}</li>`);
      
      const links = parentList.getElementsByTagName('li');
      for (const link of links) {
        if (link.innerHTML === ' null' || link.innerHTML === '') {
          link.style.display = 'none';
        } else {
          link.style.display = 'list-item';
        }
        link.ondblclick = dynamicEvent;
      }
    });
    
    // Add new thought on form submit
    form.addEventListener('submit', e => {
      e.preventDefault();
      gun.set(input.value);
      input.value = '';
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<ul id='list'></ul>
<form id='form'>
  <input id='who' placeholder='name'>
  <input id='what' placeholder='say'>
  <input type='submit' value='send'>
</form>

<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/axe.js"></script>
<script>
gun = GUN();
chat = gun.get("chat" + location.hash);
view = document;

// Send message on form submit
form.onsubmit = (eve) => { 
  chat.set(who.value + ': ' + what.value);
  eve.preventDefault();
  what.value = "";
}

// Display incoming messages
chat.map().on(function show(data, id){
  (view.line = view.getElementById(id) || view.createElement("li")).id = id;
  list.appendChild(view.line).innerText = data;
  window.scroll(0, list.offsetHeight);
});
</script>

gun.get('users').get('alice')

gun.get('user').put({ name: 'Alice', age: 25 })

gun.get('user').on((data) => {
  console.log('User updated:', data)
})

gun.get('user').once((data) => {
  console.log('User data:', data)
})

gun.get('todos').set({ text: 'Buy milk', done: false })

gun.get('todos').map().on((todo, id) => {
  console.log('Todo:', todo)
})

const gun = GUN({
  peers: ['https://your-relay-peer.com/gun']
});

const gun = GUN({
  peers: [
    'https://peer1.example.com/gun',
    'https://peer2.example.com/gun'
  ]
});