Access Variables in a Custom Tile

I would like to able to access Variables from SharpTools in a Custom Tile.

I have a custom tile which cycles through weather info from various cities. I would like the user to be able to select from a list of available cities without having to go through the Tile Editor to select from the list. Each city could be assigned a variable but currently it appears we’re currently unable to retrieve a variable value in a custom tile.

Can you share more details about the use-case with weather info and custom tiles? I’m trying to understand why some other browser-based storage mechanism couldn’t be used.

Is the goal to be able to communicate selections across custom tiles? For example, could the localStorage API work?

Example code:

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
  "schema": "0.1.0",
  "settings": [],
  "name": "Storage Demo",
  "dimensions": {"width": 2, "height": 2}
<!-- Do not edit above -->

<script src=""></script>

<div id="app">
  <button @click="increment">
    Count is: {{ count }}

  const APP_PREFIX = 'custom-app-123'
  const COUNT_ID = `${APP_PREFIX}-count`;

    data() { return {
        count: this.getInitialCount(),
    methods: {
        localStorage.setItem(COUNT_ID, this.count);
        return localStorage.getItem(COUNT_ID) ?? 0;
        let {type, key, newValue} = e;
        if(type !== "storage") return
          this.count = newValue;
      window.addEventListener("storage", this.onStorageEvent, false);

html,body { height: 100%; margin:0;}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #1CB0F6;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #1899D6;

button:hover {
  transform: translateY(1px);
  box-shadow: 0 8px #1899D6;

button:active {
  box-shadow: 0 5px #1899D6;
  transform: translateY(4px);