[Feature Request] Scriptable widgets

Have you read a contributing guide?

[X] I have read CONTRIBUTING.md
[X] I have searched the existing requests and didn't find any that were similar
[X] I have considered creating a pull request instead and want to proceed

Clear and concise description of the problem

Currently, you can't dynamically load content into your Anytype spaces. Adding this capability would be a great feature. Imagine being able to view real-time weather updates, headlines, sports scores, and more, directly within your PKM system. This would enhance its utility by integrating live information streams, making it a hub for both static and dynamic data (and for example transferring from one to the other - you see a headline and want to take a note referencing it). Such functionality would transform Anytype into a more powerful, responsive tool, keeping users informed and engaged with up-to-the-minute information relevant to their needs and interests.

Suggested solution

Introduce a scriptable widget feature in Anytype. This could involve creating a Script object type that executes JavaScript from a scriptSource relation and displays the output. Users could write scripts to fetch dynamic data from the internet and update their spaces in real time.

Example script:

import { writeToBody } from 'noteTakingAppSDK';

// Function to fetch weather data
async function fetchWeather() {
    const response = await fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Boston');
    const data = await response.json();
    return `Weather in ${data.location.name}: ${data.current.temp_f}°F, ${data.current.condition.text}`;
}

// Function to fetch the current Red Sox score
async function fetchRedSoxScore() {
    const response = await fetch('https://api.sportsdata.io/v3/mlb/scores/json/GamesByDate/YESTERDAY?key=YOUR_API_KEY');
    const games = await response.json();
    const redSoxGame = games.find(game => game.AwayTeam === 'BOS' || game.HomeTeam === 'BOS');
    if (redSoxGame) {
        return `Red Sox Score: ${redSoxGame.AwayTeam} ${redSoxGame.AwayTeamRuns} - ${redSoxGame.HomeTeam} ${redSoxGame.HomeTeamRuns}`;
    }
    return 'Red Sox did not play yesterday.';
}

// Main function to write weather and Red Sox score to note
async function writeNote() {
    const weather = await fetchWeather();
    const redSoxScore = await fetchRedSoxScore();
    writeToBody(`${weather}\n${redSoxScore}`);
}

// Execute the main function
writeNote();

Alternative

No response

Additional context

Here's what it could look like:

anyproto / anytype-ts